Extjs Window用法详解

Extjs Window用法详解

今天我们来介绍一下Extjs中一个常用的控件Window。Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid、form等控件,从而来实现更加复杂的界面逻辑。

本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用!

本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/article/extjs-window-in-detail,转载请注明出处!推荐更多Extjs教程Extjs5教程

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

如果认为此文对您有帮助,别忘了支持一下哦!

作者: 齐飞
来源: http://youring2.cnblogs.com/
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。
分类:  ExtJS

你可能感兴趣的:(ExtJs)