創建Extjs Window
創建Extjs Window的代碼如下:
//創建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500, height: 300, layout: "fit", items: [ { xtype: "form", defaultType: 'textfield', defaults: { anchor: '100%', }, fieldDefaults: { labelWidth: 80, labelAlign: "left", flex: 1, margin: 5 }, items: [ { xtype: "container", layout: "hbox", items: [ { xtype: "textfield", name: "name", fieldLabel: "姓名", allowBlank: false }, { xtype: "numberfield", name: "age", fieldLabel: "年齡", decimalPrecision: 0, vtype: "age" } ] } ] } ], buttons: [ { xtype: "button", text: "確定", handler: function () { this.up("window").close(); } }, { xtype: "button", text: "取消", handler: function () { this.up("window").close(); } } ] });
代碼中的Form可以參考《Extjs Form用法詳解》。顯示效果如下:
顯示Extjs Window
使用上面的代碼創建好的Window並沒有顯示出來,它只是創建了Window,而這個Window在默認情況下是不顯示的。
如果要它顯示出來,我們可以通過在配置項中添加autoShow來實現,代碼如下:
autoShow: true,
或者,我們可以顯示的調用window的show方法:
win.show();
創建模態窗口
Extjs Window還可以作爲模態窗口打開。什麼是模態窗口呢?當打開一個模態窗口的時候,只有模態窗口可操作,它背後的東西都會被遮罩,從而變得不能操作。
在Extjs中,我們可以通過修改window的配置項來創建模態窗口:
modal: true,
關閉按鈕和關閉動作
Extjs Window可以配置是否顯示關閉按鈕:
closable: false,
在關閉Extjs Window的時候,通過配置項closeAction可以控制按鈕是銷燬(destroy)還是隱藏(hide),默認情況下爲銷燬:
closeAction: "hide",
最大化和最小化
Extjs Window的最大化和最小化按鈕可以通過配置項顯示出來:
maximizable: true, minimizable: true,
效果如圖:
當我們點擊最大化按鈕的時候,窗口會變爲全屏;
但是,在點擊最小化按鈕的時候,窗口沒有什麼操作,這是爲什麼呢?根據API裏面的說法,最小化按鈕沒有執行任何操作,我們必須處理minimize事件來完成最小化的操作:
listeners: { minimize: function (win, opts) { win.collapse(); } },
通過上面的代碼,我們可以在點擊最小化按鈕的時候,將window摺疊起來。
在Extjs Window中顯示iframe
在Window中,既可以添加Extjs控件,也可以顯示html代碼。我們可以通過html配置項來將一個iframe添加到window中:
var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500, height: 300, layout: "fit", autoShow: true, html: '<iframe style="overflow:auto;width:100%; height:100%;" src="http://www.qeefee.com" frameborder="0"></iframe>', });
顯示效果如下:
在Extjs Window中顯示大段HTML
html配置項可以幫助我們在window中顯示一段較簡單的html代碼,如果要顯示太複雜的html,寫在js代碼中顯然是有些不利於組織和維護。
那麼要顯示大段html的時候,我們可以事先將它寫在html代碼中,然後通過contentEl配置項將它顯示在window中。
首先,在html中添加一段代碼:
<div id="content"> <h2>歡迎訪問起飛網Extjs教程</h2> <p> 更多Extjs教程,請訪問<a href="http://www.qeefee.com/zt-extjs">http://www.qeefee.com/zt-extjs</a> </p> </div>
然後,在window中添加配置項:
//創建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500, height: 300, layout: "fit", autoShow: true, contentEl: "content" });
顯示效果如下:
這種方式是先將html元素繪製在body中,然後再將它從body移動到window容器內的,所以可能會引起閃爍的現象。
解決閃爍的辦法是先將div隱藏,然後在移動到window後進行顯示。Extjs也考慮到了這個問題,並提供了兩個css class來解決,分別是:x-hidden和x-hide-display,我們可以將任意一個屬css class添加到元素中,問題就會解決了。