(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();                               //显示窗口

窗口的截图如下(查看在线示例):

image

在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();

程序运行截图如下(查看在线示例):

image

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

关闭窗口

窗口的关闭有两种方法,一种是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();  //关闭窗口(窗口关闭的时候将释放窗口资源)
});

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

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

image

这是因为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要打开的网址。

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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值