Extjs Window用法详解

建立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添加到元素中，问题就会解决了。