十、窗口

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,   //可以最大化

其结果如下图所示：