演示如何使用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要打开的网址。
打开的效果可以通过在线演示看到,截图如下。