Extjs Window用法詳解

建立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

 

顯示Extjs Window

使用上面的代碼建立好的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摺疊起來。

在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添加到元素中,問題就會解決了。

相關文章
相關標籤/搜索