瞭解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] )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /><br /><title>登陸表單</title><br /><mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script><br /><mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script><br /><mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script><br /><mce:script type="text/javascript"><!--</p><p>Ext.onReady(function(){</p><p>var _window = new Ext.Window({<br />title:"登 陸",<br />frame:true,<br />width:260,<br />height:130,<br />layout:"form",<br />labelWidth:45,<br />plain:true,<br />resizable:false,<br />defaults:{xtype:"textfield" , width:180},<br />bodyStyle:"padding:3px",<br />buttonAlign :"center",<br />closeAction:"hide",<br />listeners:{<br />"show":function(){</p><p>alert("表單顯現") ;<br /> },<br />"hide":function(){</p><p>alert("表單隱藏") ;<br />},<br />"close":function(){</p><p>alert("表單關閉") ;<br />}<br />},<br />items:[{<br />fieldLabel:"帳號"<br />},{<br />fieldLabel:"密碼"<br />}],<br />buttons:[{<br />text:"確 定"<br />},{<br />text:"取 消",<br />handler:function(){</p><p>this.hide() ;</p><p>}<br />}]<br />}) ;</p><p>_window.show() ;</p><p>}) ;</p><p>// --></mce:script><br /></head><br /><body><br /></body><br /></html><br />
擴充代碼：
Ext.Window的closeAction為'close'時
Ext.Window：items: [memberForm]<br />memberForm：items : [gridPanel]<br />gridPanel：store: fileStore<br />var fileStore = new Ext.data.JsonStore({<br /> url:'getDocListForCancelAttDoc.do?FILEITEMID='+docId,<br /> baseParams:{command:'query'},<br /> totalProperty:'fileCount',<br /> root:'fileMembers',<br /> //列表欄位<br /> fields:fileFields,<br /> pruneModifiedRecords:true<br /> });
最開始設定Ext.Window的closeAction為'hide'，每次關閉視窗後，下次載入的store還是原來的，於是每次又添加了store.reload();結果還是一樣。
將Ext.Window的closeAction改為'close'後，報Ext.fly()為空白或不是對象。
將Ext.Window的定義放到裡面後就不報了，暫時做個記錄如下：
if(!fileAppendixWindow){<br /> fileAppendixWindow = new Ext.Window({ //修改前的代碼，fileAppendixWindow在上面有定義<br /> title:'請選擇要取消的文檔',<br /> layout:'fit',<br /> resizable:false,<br /> width:500,<br /> height:300,<br /> closable:true,<br /> closeAction:'close',<br /> plain:true,<br /> modal: true,<br /> //視窗中加入文檔列表Panel<br /> items: [memberForm]<br /> });<br />}
Ext.WindowGroup代碼塊
var i = 0, mygroup;<br />function newWin() {<br /> var win = new Ext.Window({title:"視窗"+i++,<br /> width: 400,<br /> height: 300,<br /> maximizable: true,<br /> manager: mygroup<br /> });<br /> win.show();<br />}<br />function toBack() {<br /> mygroup.sendToBack(mygroup.getActive());<br />}<br />function hideAll() {<br /> mygroup.hideAll();<br />}<br />Ext.onReady(function(){<br /> mygroup = new Ext.WindowGroup();<br /> Ext.get("btn").on("click",newWin);<br /> Ext.get("btnToBack").on("click",toBack);<br /> Ext.get("btnHide").on("click",hideAll);<br />});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
