EXTJS初级UI设计进阶教程（2）

最新推荐文章于 2019-01-09 11:39:44 发布

深度抽象

最新推荐文章于 2019-01-09 11:39:44 发布

阅读量1.1k

点赞数

分类专栏： ExtJs学习

ExtJs学习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Ext.Window的基本配置项与主要方法，包括窗口的显示、隐藏、位置调整等核心功能，并提供了实例代码演示如何创建并操作窗口。同时，文章还探讨了Ext.WindowGroup的使用方式，展示了如何管理多个窗口的显示与交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://blog.youkuaiyun.com/yu624774720hua/article/details/6556799

了解Ext.Window

1、主要配置项：

      closable：是否允许关闭窗口，默认为true。
      closeAction：关闭窗口的动作，包括以下两种：
            close：从DOM删除窗口，销毁窗口及其所属组件，窗口不再可用，重新显示需要调用show方法。此为默认值。
            hide：通过设置可见性隐藏窗口，窗口还可用，调用show方法后重新显示。
      constrain：是否约束窗口只能在容器内移动，默认为false。窗口默认渲染到document.body。
      constrainHeader：是否约束窗口头部只能在容器内移动，默认为false。
      draggable：是否可拖曳，默认为true。
      resizable：是否可改变窗口的大小，默认为true。
      modal：是否为模式窗口，默认为false。
      maximizable：是否可最大化窗口，默认为false。
      maximized：是否在初始化时最大化显示窗口，默认为false。
      x：窗口的X坐标值。
      y：窗口的Y坐标值。
      manager：WindowGroup的引用。

      expandOnShow：是否在窗口显示时展开它，默认为true。当取值为false时，collapsed取值为true时，窗口初始显示时收缩。
      minimizable：是否可最小化窗口，默认为false。需要自定义最小化行为。
      defaultButton：当窗口获得焦点时，默认获得焦点的按钮。
      plain：主体背景是否透明，默认为false。

2、主要方法：

      show( [String/Element animateTarget], [Function callback], [Object scope] )：显示窗口。
      hide( [String/Element animateTarget], [Function callback], [Object scope] )：隐藏窗口。
      center()：窗口居中显示。
      close()：关闭窗口，相当于closeAction值为close的情形。
      maximize()：最大化窗口。
      restore()：还原窗口大小。
      toggleMaximize()：在最大化和还原之间切换。

      minimize()：最小化窗口。
      setActive( Boolean active )：激活窗口。
      focus()：窗口获得焦点。
      toBack()：后置窗口。
      toFront( [Boolean e] )：前置窗口。
      resize( Ext.Window this, Number width, Number height )：改变大小。

3、Ext.WindowGroup的主要方法：

      hideAll()
      sendToBack( String/Object win )
      bringToFront( String/Object win )
      get( String/Object id )
      getActive()

      each( Function fn, [Object scope] )
      getBy( Function fn, [Object scope] )

[xhtml]view plaincopy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
 <title>登陆窗体</title>  
 <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
 <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
 <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
 <mce:script type="text/javascript"><!--  
       
     Ext.onReady(function(){  
       
         var _window = new Ext.Window({  
                 title:"登 陆",  
                 frame:true,  
                 width:260,  
                 height:130,  
                 layout:"form",  
                 labelWidth:45,  
                 plain:true,  
                 resizable:false,  
                 defaults:{xtype:"textfield" , width:180},  
                 bodyStyle:"padding:3px",  
                 buttonAlign :"center",  
                 closeAction:"hide",  
                 listeners:{  
                     "show":function(){  
                                   
                                 alert("窗体显现") ;  
                            },  
                     "hide":function(){  
                       
                             alert("窗体隐藏") ;  
                     },  
                     "close":function(){  
                                   
                                 alert("窗体关闭") ;  
                             }  
                 },  
                 items:[{  
                     fieldLabel:"账号"  
                 },{  
                     fieldLabel:"密码"  
                 }],  
                 buttons:[{  
                     text:"确 定"  
                 },{  
                     text:"取 消",  
                     handler:function(){  
                       
                         this.hide() ;  
                       
                     }  
                 }]  
             }) ;  
               
         _window.show() ;  
           
     }) ;  
       
 // --></mce:script>  
 </head>  
 <body>  
 </body>  
 </html>  

扩展代码：

Ext.Window的closeAction为'close'时

[javascript] view plaincopy 
   
 Ext.Window：items: [memberForm]  
 memberForm：items : [gridPanel]  
 gridPanel：store: fileStore  
 var fileStore = new Ext.data.JsonStore({  
    url:'getDocListForCancelAttDoc.do?FILEITEMID='+docId,  
    baseParams:{command:'query'},  
    totalProperty:'fileCount',  
    root:'fileMembers',  
    //列表字段  
    fields:fileFields,  
    pruneModifiedRecords:true  
   });  

最开始设置Ext.Window的closeAction为'hide'，每次关闭窗口后，下次加载的store还是原来的，于是每次又添加了store.reload();结果还是一样。

将Ext.Window的closeAction改为'close'后，报Ext.fly()为空或不是对象。

将Ext.Window的定义放到里面后就不报了，暂时做个记录如下：

[javascript]view plaincopy 
   
 if(!fileAppendixWindow){  
     fileAppendixWindow = new Ext.Window({ //修改前的代码，fileAppendixWindow在上面有定义  
     title:'请选择要取消的文档',  
        layout:'fit',  
        resizable:false,  
        width:500,  
        height:300,  
        closable:true,  
        closeAction:'close',  
           plain:true,  
           modal: true,  
           //窗口中加入文档列表Panel  
        items: [memberForm]  
    });  
 }  

Ext.WindowGroup代码块

[javascript] view plaincopy 
   
 var i = 0, mygroup;  
 function newWin() {  
     var win = new Ext.Window({title:"窗口"+i++,  
         width: 400,  
         height: 300,  
         maximizable: true,  
         manager: mygroup  
     });  
     win.show();  
 }  
 function toBack() {  
     mygroup.sendToBack(mygroup.getActive());  
 }  
 function hideAll() {  
     mygroup.hideAll();  
 }  
 Ext.onReady(function(){  
     mygroup = new Ext.WindowGroup();  
     Ext.get("btn").on("click",newWin);  
     Ext.get("btnToBack").on("click",toBack);  
     Ext.get("btnHide").on("click",hideAll);  
 });  