当前位置: 代码迷 >> Web前端 >> 10、窗口
  详细解决方案

10、窗口

热度:348   发布时间:2012-09-25 09:55:58.0
十、窗口

ExtJS的窗口(Window)可以在网页中任意添加,由于其可以放大、缩小、移动,非常灵活,在使用过程中非常受欢迎。现新建一个Window.html网页,其内容如下:

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">

<html>

<head>

   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8; user-scalable=no">

   <title>Window窗体</title>

   <link rel="stylesheet" type="text/css"href="resources/css/ext-all.css"/>

    <scripttype="text/javascript"src="bootstrap.js"></script>

    <script type="text/javascript"src="Window.js"></script>

</head>

<body>

</body>

</html>

然后新建Window.js文件,添加如下代码:

Ext.onReady(function(){

    var myWin = Ext.create('Ext.Window',{

       title:'Window窗体', //窗体标题

       closable:true,      //可以关闭

       width:600,          //宽度

       height:350,         //高度

       items:[]            //包含的对象

    });

    myWin.show();//显示Window窗体

});

值得注意的是,最后一句show(this)非常关键,它将定义的Window窗体显示出来。其结果如下图所示:

如果要在这个定义的Window窗体中添加其他组件,如按钮、Panel等,则在它的items属性中添加,也可以直接通过add方法来添加。如下:

    var myPanel = Ext.create('Ext.form.Panel', {

                  title:'My Panel',

                  width:200,

                  height:200,

                  autoScroll:true,

                  closable:true,

                  collapsible:true,

                  html:'你好,欢迎使用Panel!<br/>Panel在实际应用中非常广泛'

              });

    myWin.add(myPanel);

其结果如下图所示:

如果要添加多个Window窗体,则同样定义多个Ext.Window对象即可,如下:

    var myWin2 = Ext.create('Ext.Window',{

       title:'Window窗体2', //窗体标题

       closable:true,      //可以关闭

       width:600,          //宽度

       height:350,         //高度

       plain:true,        //背景透明

       headerPosition:'right', //标题位置在右侧

       items:[]            //包含的对象

    }).show();

其结果如下图所示:

此外,如果需要Window窗体显示最大化、最小化按钮,设置其minimizable属性和maximizable属性,如下:

       minimizable:true,   //可以最小化

       maximizable:true,   //可以最大化

其结果如下图所示:



  相关解决方案