(9) ExtJS4.2 Window的用法示例 ExtJS中Window组件最小化 使用iframe填充ExtJS Window组件

演示如何使用Window。

我们首先来创建一个窗口：

var win = Ext.create("Ext.window.Window", {
    title: "标题 - www.qeefee.com",       //标题
    height: 200,                          //高度
    width: 400,                           //宽度
    layout: "fit",                        //窗口布局类型
    modal: true,                          //是否模态窗口，默认为false       //是否模态窗口，默认为false(窗口显示 页面的按钮仍然有效，true时页面的按钮就不可以点击)
    html: "<h2>你打开了一个窗口</h2>"     //窗口的html代码
});
win.show();                               //显示窗口

窗口的截图如下（查看在线示例）：

在ExtJS 4.x中，我们推荐使用Ext.create()方法来创建对象。这个方法的第一个参数是类名，第二个参数的创建对象时用到的配置项。

在上面的示例中，我已经将配置项加了备注，不在详细的说明。

接下来看一个比较复杂的窗口

var win = Ext.create("Ext.window.Window", {
    title: "标题 - www.qeefee.com",
    height: 300,
    width: 400,
    layout: "fit",
    modal: true,
    resizable: false,
    maximizable: true,
    minimizable: false,
    closable: true,
    tbar: [
        { text: "保存", iconCls: "qicon-save" },
        { text: "新建", iconCls: "qicon-add" }
    ],
    buttons: [
        { text: "确定", iconCls: "qicon-accept" },
        { text: "取消", iconCls: "qicon-delete" },
    ],
    items: []
});
win.show();

程序运行截图如下（查看在线示例）：

这个窗口有最大化和关闭按钮，并且包含了工具栏和按钮项，更像是我们在实际开发中使用的。

关闭窗口

窗口的关闭有两种方法，一种是close，一中是hide，从名字中就可以看出，前一个是真的关闭窗口并释放窗口资源，而hide则是将窗口隐藏了。

var g_win = Ext.create("Ext.window.Window", {
    title: "标题 - www.qeefee.com",
    height: 200,
    width: 400,
    layout: "fit",
    modal: false,
    html: "<h2>你打开了一个窗口</h2>"
});
Ext.get("btn3").on("click", function () {
    g_win.show();   //显示窗口
});
Ext.get("btn4").on("click", function () {
    g_win.hide();   //隐藏窗口
});
Ext.get("btn5").on("click", function () {
    g_win.close();  //关闭窗口（窗口关闭的时候将释放窗口资源）
});

在这段代码中，我们首先定义了一个全局的窗口，并在界面上放了三个按钮呢，分别绑定显示、隐藏和关闭窗口的方法。

当我们点击关闭窗口按钮以后，再回过头来点击显示窗口时会发现没有反应，打开控制台则能看到脚本错误：

这是因为close的时候窗口资源已经被释放了的原因（查看在线示例）。

------------------------------------------------------------------------------------------

在上一节中我们演示了如何使用ExtJS的Window组件，这篇内容中我们来演示一下如何将窗口最小化。

要让ExtJS标题栏中显示最小化按钮并不麻烦，只需要设置 minimizable: true 即可。但是显示了最小化按钮，点击的时候却没有任何反应。这是因为ExtJS没有处理最小化事件，需要我们自己来定义最小化按钮被点击时的操作。

Ext.onReady(function () {
    var g_win = Ext.create("Ext.window.Window", {
        title: "标题 - www.qeefee.com",
        height: 200,
        width: 400,
        layout: "fit",
        modal: true,
        closable: false,
        minimizable: true,
        animateTarget: "btn1",
        listeners: {
            minimize: function () {
                var me = this;
                me.hide();
            }
        },
        html: "<h2>最小化窗口演示</h2>"
    });

    Ext.get("btn1").on("click", function () {
        g_win.show();   //显示窗口
    });
});

要想将窗口最小化，需要处理最小化事件。上面标记的代码就是为window添加最小化事件，处理方法是将窗口隐藏。

当按钮“显示窗口”被点击的时候，窗口会被打开，当点击最小化按钮的时候，窗口被隐藏（查看在线示例）

------------------------------------------------------------------------------------------

上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件，在这篇内容中我们来演示一下如何使用iframe填充window组件。

思路很简单，首先创建一个window，然后使用fit布局（这种布局的好处是子元素将填充整个控件），接下来将html属性设置为iframe即可。我们来看看代码：

Ext.onReady(function () {
    Ext.get("btn1").on("click", function () {
        var win = Ext.create("Ext.window.Window", {
            title: "标题 - www.qeefee.com",
            height: 600,
            width: 1000,
            layout: "fit",
            modal: true,
            closable: true,
            animateTarget: "btn1",
            html: '<iframe style="overflow:auto;width:100%; height:100%;" src="http://youring2.cnblogs.com" frameborder="0"></iframe>'
        });
        win.show();
    });
});

这段代码将在窗口中显示一个iframe，src为iframe要打开的网址。

打开的效果可以通过在线演示看到，截图如下。