ExtJS入门教程01，Window如此简单，你怎能不会？

这是一系列ExtJS教程，今天的是第一篇，主要介绍ExtJS中Window的基本用法。希望大家能够支持！

来吧，创建一个漂亮的弹出窗

var win = Ext.create("Ext.Window", {

 title: "ExtJS Window",

 width: 500,

 height: 300,

 autoShow: true

});

效果：

小伙伴们注意了，如果不加autoShow:true的时候，window是不会显示出来的，当然，我们可以使用win.show()方法来显示一个窗口。

在窗口中显示一个网页

小伙伴们常常希望能够在window中添加iframe，可以方便的将其它页面显示在窗口中，具体的做法是如下：

Ext.onReady(function () {

 var win = Ext.create("Ext.Window", {

 title: "ExtJS Window",

 width: 500,

 height: 300,

 html: iframe src="http://www.qeefee.com" frameborder="0" /iframe ,

 autoShow: true

});

效果：

（我这里显示了自己的网站，臭美一下~）

为window指定html属性，这个属性是要在window的body中显示的html元素，可以是任意的html标签（iframe也是html标签），例如我们要显示一段话：

Ext.onReady(function () {

 var win = Ext.create("Ext.Window", {

 title: "ExtJS Window",

 width: 500,

 height: 300,

 html: p 齐飞是个程序员！ /p ,

 autoShow: true

});

效果如下：

显示大段的HTML

当然，小伙伴们的需求总是很多的，比如就有人说了，html属性如果很长，这样拼接字符串岂不是很丑？！

答案是肯定的，丑的不能再丑了~大家看一下iframe的那个代码，已经是比较长了，编辑的时候经常要拖动下面的滚动条，这样显然是不方便的，并且还要经常写属性，引号、双引号来回切换，简直是烦透了，有没有解决办法呢？

额，办法肯定是有的，小伙伴们，来试试contentEl配置项吧。

contentEl配置项允许我们将一个html元素指定为window要显示的内容，也就是说，如果我们页面上有一个如下的div：

 div id="content" 

 strong Window 的内容 /strong 

 p 齐飞是个程序员！ /p 

 /div 

我们可以在window的配置中来使用：

Ext.onReady(function () {

 var win = Ext.create("Ext.Window", {

 title: "ExtJS Window",

 width: 500,

 height: 300,

 contentEl: content,

 autoShow: true

});

效果如下：

contentEl可以将页面中现有的html元素添加到window中，需要注意的是一定要在页面加载完成之后使用，否则页面中的元素是不存在的。

解决内容闪烁的问题

这个时候，爱找麻烦的小伙伴又站了出来，小伙伴说页面加载以后内容先在页面中绘制了，会闪烁一下才显示在window中，额，当然，这是一个问题，那么该如何解决呢？

聪明的小伙伴这个时候自己想到一个办法，就是先将div隐藏，加一个style属性，把display设置为none；

爱动手的小伙伴验证了聪明的小伙伴的想法，发现div在window中仍然是隐藏的，如果我们再添加一个额外的方法岂不是大费周章？

现在我们来看一看contentEl的API吧，在api的最后一段，有这样一句话：

Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

英语好的小伙伴们知道了吧，为我们的div添加一个x-hidden或者x-hide-display属性就能简单的解决内容闪烁的问题了。修改后的div如下：

 div id="content" 

 strong Window 的内容 /strong 

 p 齐飞是个程序员！ /p 

 /div 

作为一个容器，它应该这样

看到了吧，window就是这么简单，我们可以很方便的来使用它。

通过Ext.create来创建window对象，create方法的第二个参数为window的配置项，包括width、height等。

ExtJS window作为一个容器，可以在里面添加其他的容器或组件，例如form、grid等，在添加extjs组件的时候可以使用items配置项来实现。

下面的代码演示了如何向window中添加一个form，并在form中加入一些控件：

Ext.onReady(function () {

 var win = Ext.create("Ext.Window", {

 title: "ExtJS Window",

 width: 500,

 height: 300,

 items: [

 xtype: "form",

 border: false,

 bodyPadding: 5,

 fieldDefaults: {

 labelAlign: right,

 labelWidth: 60,

 width: 470

 items: [

 xtype: "textfield", fieldLabel: "姓名"

 xtype: "textarea", fieldLabel: "留言"

 buttons: [

 text: "确定"

 autoShow: true

});

效果如图：

哎呀，我被关闭了！

小伙伴们通常希望在window关闭的时候得到通知，例如刷新现有的列表等，现在extjs中的事件是通过在配置项中添加listeners来完成，当然，如果是动态添加事件，就要使用on方法了。

我们先来一个通过listeners添加事件的例子：

var win = Ext.create("Ext.Window", {

 title: "ExtJS Window",

 width: 500,

 height: 300,

 listeners: {

 close: function () {

 Ext.MessageBox.alert("提示", "哎呀，我被关闭了！");

 buttons: [

 text: "确定",

 handler: function () {

 this.up("window").close();

 autoShow: true

});

当我们点击“确定”按钮的时候将关闭窗口，试一下效果吧。

下面来一个通过on方法添加事件的例子：

var win = Ext.create("Ext.Window", {

 title: "ExtJS Window",

 width: 500,

 height: 300,

 buttons: [

 text: "确定",

 handler: function () {

 this.up("window").close();

 autoShow: true

win.on("close", function () {

 Ext.MessageBox.alert("提示", "哎呀，我被关闭了！");

});

好了，这就是ExtJS Window的一些入门级用法，你还有别的不明白？告诉我，我来完善这篇文章。

这篇文章还发布在了我的个人网站上面，链接地址：http://www.qeefee.com/article/extjs-starter-01-window

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