Window
先來看一下API：
Window 繼承于 Panel，是Panel的子類，Window組件默認(rèn)是可以浮動(dòng)和拖拽的，并且支持最大最小化的能力。Panel 中的各種屬性和方法在Window組件中是可以直接使用的。來看例子：
<script type="text/javascript">
Ext.onReady(function(){
var _window = new Ext.Window({
title: "登陸窗體",
frame:true,
height:150,
width:300,
layout:"form",
labelWidth:45,
/* 樣式控制 */
plain:true,
/* 控制窗口大小 */
resizable:false,
/* 自定義Window內(nèi)部 CSS 樣式 */
bodyStyle:"padding:15px",
/* button 定位 */
buttonAlign:"center",
/* 是否可關(guān)閉 */
closable:false,
listeners:{
"show":function(){alert("Hello World")},
"hide":function(){alert("Window is hide")},
"close":function(){alert("Window is closed")}
},
defaults:{xtype:"textfield", width:200},
items:[
{fieldLabel:"用戶名"},
{fieldLabel:"密 碼"}
],
buttons:[
{text:"確定"},
{
text:"取消",
handler:function(){
_window.hide();
}
}
]
});
/* 顯示W(wǎng)indow組件 */
_window.show();
});
</script>
效果：
彈出來一個(gè)很漂亮的窗口，而且在IE和FF下效果是一樣的，這一點(diǎn)EXT不同瀏覽器之間的兼容做的很好，減少了很多調(diào)試樣式的工作。
Window組件構(gòu)造參數(shù)(Config Options)：
title： 窗體名稱，顯示在窗體的頭部，默認(rèn)為空
minimizable：是否顯示最小化按鈕，true，顯示最小化按鈕，默認(rèn)false
maximizable：是否顯示最大化按鈕，true，顯示最大化按鈕，默認(rèn)false
屬性：
plain：Boolean，True，顯示W(wǎng)indow內(nèi)容部分的背景和窗體背景一致，F(xiàn)alse，Window內(nèi)容部分的背景較亮于Window的背景，默認(rèn)為false。
bodyStyle：可以對Window組件內(nèi)容部分自定義CSS樣式
resizable：通過拖拽控制窗口大小
buttonAlign：調(diào)整添加到Panel中的Button的水平位置，可以取值“l(fā)eft”，“center”，“right”，默認(rèn)“right”
closable：默認(rèn)是“true”，顯示關(guān)閉按鈕
closeAction：關(guān)閉按鈕點(diǎn)擊時(shí)響應(yīng)的動(dòng)作，默認(rèn)動(dòng)作關(guān)閉會(huì)將窗體從DOM中移除并銷毀。這里一點(diǎn)需要說明一下，瀏覽器對DOM操作是非常消耗資源的，關(guān)閉窗體可以使用‘hide’ 參數(shù)，它僅是簡單的將窗體隱藏，需要的時(shí)候還可以顯示出來，這樣的操作速度會(huì)更快更省資源
items：被添加到Container的一個(gè)item或者item數(shù)組，這里的Container是Window窗體，Container和item都是Ext的element，其他的Ext Container也都有items屬性，使用方法和這里是一樣的。
方法：
show：顯示窗口
hide：隱藏窗口
事件：
show：當(dāng)窗口顯示時(shí)觸發(fā)
hide：當(dāng)窗口隱藏時(shí)觸發(fā)
上面僅列出來例子中用到的一些屬性方法事件，更多的需要查看Window組件的API，里面定義了非常多的屬性方法事件，用到什么再去查吧。
Window 內(nèi)部組件的取值
Ext為Container和內(nèi)部的items之間定義了一種索引機(jī)制，可以從items向上索引其所在的Container對象，也可以從Container向下索引其內(nèi)部的items，通過這種機(jī)制，就可以取得我們想要的值了。
Ext.onReady(function(){
var _window = new Ext.Window({
......
buttons:[
{
text:"OK",
handler:function(){
alert(this.text);
alert(this.ownerCt.title);
}
......
});
先來看一下例子中的this的含義
this：handler 中的 this 指向handler所在對象本身
ownerCt，(owner Container)當(dāng)前對象所在的對象（一個(gè)Ext的Container），默認(rèn)是undefined，當(dāng)當(dāng)前的對象被放到一個(gè)Container對象中，ownerCt會(huì)被自動(dòng)賦值。
結(jié)果第一次會(huì)彈出 Button 上的文字“OK”，第二次彈出“Get Value”，說明可以通過ownerCt向上索引到Window對象。
那么如何向下索引呢？
var _window = new Ext.Window({
title:"Get Value",
width:250,
height:100,
layout:"form",
labelWidth:45,
plain:true,
bodyStyle:"padding:5px",
items:{xtype:"textfield", fieldLabel:"Name"},
buttons:[
{
text:"OK",
handler:function(){
alert(this.ownerCt.items.first().getValue());
}
}
]
});
通過 this.ownerCt.items.first().getValue() 方法就能得到input框中的值，在input框中輸入meizhi
彈出“meizhi”
items：這里的items，不是構(gòu)造參數(shù)中的items，this.ownerCt.items，是一個(gè)對象加上“.”的用法，是當(dāng)前這個(gè)對象的屬性，看一下API中的定義：
items 是 MixedCollection 類型，是一個(gè)集合對象，MixedCollection中的幾個(gè)常用方法：
first()：返回集合當(dāng)中的第一個(gè)元素
itemAt(index)：指出index位置上的 item
窗體里有多個(gè) TextField 的取值：
Ext.onReady(function(){
var _window = new Ext.Window({
title:"Get Value",
width:250,
height:150,
layout:"form",
labelWidth:45,
plain:true,
bodyStyle:"padding:5px",
items:[
{xtype:"textfield", fieldLabel:"Name"},
{xtype:"textfield", fieldLabel:"Address"}
],
buttons:[
{
text:"OK",
handler:function(){
var _items = this.ownerCt.items;
var temp = "";
temp += "Name : " + _items.first().getValue();
temp += ", Address : " + _items.itemAt(1).getValue();
alert(temp);
}
}
]
});
_window.show();
});
效果：
通過items就得到了 Container 中的 item 的值了，但是這種方法看起來不是很靈活，使用 MixedCollection 中的
item(String / Number)方法可以通過ID，Name直接索引到目標(biāo)對象，這就想我們使用 JavaScript 中的 Document.getElementById 方法一樣，想要那個(gè) item， 直接取來就好了。
有一種更加常用的取 Ext 中對象的方法是 Ext.getCmp() ，這個(gè)方法可以直接通過 ID 來取到目標(biāo)對象。
但是實(shí)際應(yīng)用中的情況是比較復(fù)雜的，頁面中會(huì)存在很多的Ext Component，很多時(shí)候多個(gè)表單中會(huì)有相似甚至相同含義的對象，在為它們命名的時(shí)候非常容易命名相同，在這樣的場景中大量運(yùn)用 getCmp() 方法，一不小心就會(huì)出現(xiàn)錯(cuò)誤。
使用Cotainer的items()方法，可以在一定程度上避免上面所提到的情況發(fā)生，items()方法取的對象的范圍局限在當(dāng)前 Container對象的內(nèi)部，這樣出現(xiàn)重名Component對象的機(jī)會(huì)就非常小，也不容易出錯(cuò)。這樣在調(diào)試的時(shí)候也非常方便，僅需要在當(dāng)前Container的部分就可以找到問題。
