建立Extjs Windowcss
建立Extjs Window的代碼以下:html
//建立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用法詳解》。顯示效果以下:ide
使用上面的代碼建立好的Window並無顯示出來,它只是建立了Window,而這個Window在默認狀況下是不顯示的。flex
若是要它顯示出來,咱們能夠經過在配置項中添加autoShow來實現,代碼以下:this
autoShow: true,
或者,咱們能夠顯示的調用window的show方法:spa
win.show();
Extjs Window還能夠做爲模態窗口打開。什麼是模態窗口呢?當打開一個模態窗口的時候,只有模態窗口可操做,它背後的東西都會被遮罩,從而變得不能操做。orm
在Extjs中,咱們能夠經過修改window的配置項來建立模態窗口:htm
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摺疊起來。
在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>', });
顯示效果以下:
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添加到元素中,問題就會解決了。