实用ExtJS教程100例-006：ExtJS中Window的用法示例

news/2024/7/7 16:13:01

在前面几个示例中，我们演示了MessageBox的各种用法，今天这篇文章将演示如何使用Window。

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

var win = Ext.create("Ext.window.Window", {
    title: "标题 - www.qeefee.com",       //标题
    height: 200,                          //高度
    width: 400,                           //宽度
    layout: "fit",                        //窗口布局类型
    modal: true,                          //是否模态窗口，默认为false
    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();  //关闭窗口（窗口关闭的时候将释放窗口资源）
});