只為了樹(shù)也要學(xué)ext

3.1. 真的，我是為了樹(shù)，才開(kāi)始學(xué)ext的。
之前使用過(guò)xtree和dojo中的tree，感覺(jué)都是怪怪的，界面簡(jiǎn)陋，功能也不好上手，待看到ext里的樹(shù)形真是眼前一亮，在此之前，動(dòng)態(tài)增添，修改刪除節(jié)點(diǎn)，拖拽和右鍵菜單，我一直認(rèn)為是不可能實(shí)現(xiàn)的任務(wù)，而在ext上卻輕松實(shí)現(xiàn)了，而且界面和動(dòng)畫(huà)效果相當(dāng)完美。真是讓人愛(ài)不釋手啊。

樹(shù)形是非常典型的一種數(shù)據(jù)結(jié)構(gòu)，多級(jí)菜單，部門(mén)組織結(jié)構(gòu)，省市縣三級(jí)這種金字塔結(jié)構(gòu)都可以用樹(shù)形表示，要表示一個(gè)老爸有一幫孩子的情況真是非樹(shù)形莫屬啊，做好了這部分，絕對(duì)是個(gè)亮點(diǎn)。

3.2. 傳統(tǒng)是先做出一棵樹(shù)來(lái)。
樹(shù)形世界的萬(wàn)物之初是一個(gè)TreePanel。

var tree = new Ext.tree.TreePanel('tree');

這里的參數(shù)'tree'，表示渲染的dom的id。html寫(xiě)著個(gè)<div id="tree"></div>做呼應(yīng)呢，最后這棵樹(shù)就出現(xiàn)在這個(gè)div的位置上。

現(xiàn)在我們獲得了樹(shù)形面板，既然是樹(shù)就必須有一個(gè)根，有了根才能在上邊加枝子，放葉子，最后裝飾的像一棵樹(shù)似的。嗯，所以根是必要的，我們就研究研究這個(gè)根是怎么咕噥出來(lái)的。

首先，我們把這個(gè)根root，放到tree里，用了setRootNode()方法，就是告訴tree，這是一個(gè)根，你可得把它放好啊。

立刻對(duì)tree進(jìn)行渲染，讓它出現(xiàn)在id="tree"的地方，這個(gè)id可是在上面指定的，如果有疑問(wèn)，請(qǐng)翻回去繼續(xù)研究，我們就不等你，繼續(xù)了。

當(dāng)當(dāng)，我非常榮幸的向您宣布，咱們的第一棵樹(shù)出來(lái)了。這是它的照片。

3.3. 超越一個(gè)根
上回書(shū)說(shuō)道，我們要偷偷插上幾個(gè)杈子，讓這個(gè)本來(lái)就是樹(shù)的樹(shù)，更像一棵樹(shù)。


嗯，現(xiàn)在的確有點(diǎn)兒意思了，不過(guò)它開(kāi)始的時(shí)候就那么縮在一團(tuán)，看著很不爽，每次都要點(diǎn)這么幾下才能看到底下的東西，咱們有沒(méi)有辦法讓它每次渲染好就自己展開(kāi)呢？

方法當(dāng)然有咯，請(qǐng)上眼。

 

這一下就能解您燃眉之急，第一個(gè)參數(shù)是說(shuō)，是否遞歸展開(kāi)所有子節(jié)點(diǎn)，如果是false，就只展開(kāi)第一級(jí)子節(jié)點(diǎn)，子節(jié)點(diǎn)下面還是折疊著的，。第二個(gè)參數(shù)是說(shuō)是否有動(dòng)畫(huà)效果，true的話，你可以明顯看出來(lái)那些節(jié)點(diǎn)是一點(diǎn)兒點(diǎn)兒展開(kāi)的，否則就是刷拉一下子就出來(lái)了.




3.4. 你不會(huì)認(rèn)為2.0里跟1.x是一樣的吧？
第一個(gè)區(qū)別就是TreePanel的定義，原來(lái)的id要放到{}中，對(duì)應(yīng)的名字是el。像這樣改：



即使這樣改完了，還是什么都看不見(jiàn)，我們錯(cuò)過(guò)了什么？用findbug看了一下dom，height竟然是0，當(dāng)然啥也看不見(jiàn)了，2.0里的樹(shù)為啥不會(huì)自動(dòng)伸縮呢，只好咱們給它設(shè)置一個(gè)初始高度，在html里設(shè)置個(gè)300px的高度，就可以顯示出來(lái)了。


另一個(gè)也如法炮制。我們就可以看到2.0比1.x多了鼠標(biāo)移到樹(shù)節(jié)點(diǎn)上時(shí)的高亮顯示。

好了，看了這些例子，應(yīng)該對(duì)樹(shù)型有些認(rèn)識(shí)了，雖然這里只有TreeNode，卻能表示枝杈或者葉子，原理很簡(jiǎn)單，如果這個(gè)TreeNode下有其他節(jié)點(diǎn)，它就是一個(gè)枝杈，如果沒(méi)有，它就是一個(gè)葉子，從它前頭的圖標(biāo)就很容易看出來(lái)。嘿嘿，根其實(shí)就是一個(gè)沒(méi)有上級(jí)節(jié)點(diǎn)的枝杈了。實(shí)際上，他們都是TreeNode而已，屬性不同而已。

3.5. 這種裝配樹(shù)節(jié)點(diǎn)的形式，真是讓人頭大。
如此刀耕火種不但麻煩，而且容易犯錯(cuò)，有沒(méi)有更簡(jiǎn)便一些的方法嗎？答案是利用Ext.tree.TreeLoader和后臺(tái)進(jìn)行數(shù)據(jù)交換，我們?cè)谥惶峁?shù)據(jù)，讓TreeLoader幫咱們做數(shù)據(jù)轉(zhuǎn)換和裝配節(jié)點(diǎn)的操作。

啦啦啦，json和ajax要登場(chǎng)了，不過(guò)你是否還記得我說(shuō)過(guò)，一旦涉及到ajax就需要配合服務(wù)器了，ajax是無(wú)法從本地文件系統(tǒng)直接取得數(shù)據(jù)的。

首先，讓我們?yōu)門(mén)reePanel加上TreeLoader

在此，TreeLoader僅包含一個(gè)參數(shù)dataUrl: '03-03.txt'，這個(gè)dataUrl表示，在渲染后要去哪里讀取數(shù)據(jù)，為了方便模擬，我們寫(xiě)了一個(gè)txt文本文件提供數(shù)據(jù)，直接打開(kāi)03-03.txt可以看到里邊的內(nèi)容。

里邊是一個(gè)包含了兩個(gè)節(jié)點(diǎn)定義的數(shù)組，可能你會(huì)發(fā)覺(jué)那個(gè)多出來(lái)的屬性leaf:true，它的效果很神奇，這一點(diǎn)我們馬上就可以看到。

如果你現(xiàn)在就去匆匆忙忙的刷新頁(yè)面，想看一下咱們的成果，那一定會(huì)失望而歸，頁(yè)面上沒(méi)有像你期待的那樣，從03-03.txt讀取數(shù)據(jù)，顯示到頁(yè)面上，你依然只能看到那個(gè)孤零零的根。這是因?yàn)門(mén)reeNode是不支持ajax的，我們需要把根節(jié)點(diǎn)換成AsyncTreeNode，它可以實(shí)現(xiàn)咱們的愿望。

var root = new Ext.tree.AsyncTreeNode({text:'偶是根'});

估計(jì)誰(shuí)第一次看到這場(chǎng)面都一定嚇傻了。我們不是只定義了兩個(gè)節(jié)點(diǎn)嗎？怎么一下子跑出這么多東西來(lái)？先別著急，讓我們先把root.expand(true, true)改成root.expand()，避免節(jié)點(diǎn)無(wú)限展開(kāi)下去，然后慢慢研究這個(gè)情況。



現(xiàn)在場(chǎng)面被控制住了，取消了遞歸展開(kāi)，只展開(kāi)根節(jié)點(diǎn)的第一層節(jié)點(diǎn)，我們得到的確實(shí)是與03-03.txt文件里相對(duì)應(yīng)的兩個(gè)節(jié)點(diǎn)，不過(guò)這兩個(gè)節(jié)點(diǎn)有些不同，not leaf節(jié)點(diǎn)的圖標(biāo)赫然是枝杈的圖標(biāo)，如果點(diǎn)擊它前面的加號(hào)，便又成了上面的場(chǎng)景。Why?

原因就來(lái)自AsyncTreeNode，這個(gè)東西會(huì)繼承根節(jié)點(diǎn)TreeLoader中dataUrl，你點(diǎn)展開(kāi)的時(shí)候，會(huì)執(zhí)行這個(gè)節(jié)點(diǎn)的expand()方法，ajax會(huì)跑到dataUrl指定的地址去取數(shù)據(jù)，用firebug可以看到當(dāng)前節(jié)點(diǎn)id會(huì)作為參數(shù)傳遞給dataUrl指定的地址，這樣我們的后臺(tái)就可以通過(guò)這個(gè)節(jié)點(diǎn)的id計(jì)算出該返回什么數(shù)據(jù)，得到了數(shù)據(jù)TreeLoader去解析數(shù)據(jù)并裝配成子節(jié)點(diǎn)，然后顯示出來(lái)。
哈哈，現(xiàn)在就是關(guān)鍵部分了。因?yàn)樵蹅兪褂玫?3-03.txt提供的數(shù)據(jù)，不會(huì)判斷當(dāng)前節(jié)點(diǎn)的id，所以每次返回的數(shù)據(jù)都是一樣的，這就是樹(shù)會(huì)無(wú)限循環(huán)下去的原因了。

那么為啥只有第一個(gè)節(jié)點(diǎn)會(huì)無(wú)限循環(huán)下去呢？第二個(gè)節(jié)點(diǎn)就沒(méi)有那個(gè)小加號(hào)，呵呵~因?yàn)榈诙€(gè)節(jié)點(diǎn)不是AsyncTreeNode ，TreeLoader在生成節(jié)點(diǎn)的時(shí)候會(huì)判斷數(shù)據(jù)里的leaf屬性，如果是leaf:true，那么就會(huì)生成TreeNode而不是AsyncTreeNode，TreeNode可不會(huì)自動(dòng)去用ajax取值，自然就不會(huì)無(wú)限循環(huán)展開(kāi)了。

現(xiàn)實(shí)中，異步讀取屬性的節(jié)點(diǎn)是很爽的一件事情，因?yàn)槟憧赡芤４娉汕先f(wàn)條節(jié)點(diǎn)記錄。一次性全部裝載的話，無(wú)論讀取和渲染的速度都會(huì)很慢。使用異步讀取的方式，只有點(diǎn)擊某一節(jié)點(diǎn)的時(shí)候，才去獲得子節(jié)點(diǎn)屬性，并進(jìn)行渲染，極大的提高了用戶體驗(yàn)。而且ext的樹(shù)形本身有緩存機(jī)制，打開(kāi)一次，再點(diǎn)擊也不會(huì)去重復(fù)讀取了，提升了響應(yīng)速度。

為了鞏固學(xué)習(xí)效果，咱們?cè)賹?xiě)一個(gè)json獲得數(shù)據(jù)的例子，這次的json稍微寫(xiě)復(fù)雜一點(diǎn)兒。

這次對(duì)應(yīng)的json數(shù)據(jù)文件是03-04.txt。

[

    {text:'01',children:[

        {text:'01-01',leaf:true},

        {text:'01-02',children:[

            {text:'01-02-01',leaf:true},

            {text:'01-02-02',leaf:true}

        ]},

        {text:'01-03',leaf:true}

    ]},

    {text:'02',leaf:true}

]

 

這也可以看作是在數(shù)據(jù)不多的情況下，一次加載所有數(shù)據(jù)的途徑，只要確保所有葉子節(jié)點(diǎn)上都加上leaf:true的屬性，就不會(huì)出現(xiàn)循環(huán)展開(kāi)的問(wèn)題了。
 
 
 祝福吧！把表單和輸入控件都改成ext的樣式
 
 4.1. 不用ext的form啊，不怕錯(cuò)過(guò)有趣的東西嗎？初看那些輸入控件，其實(shí)就是修改了css樣式表而已。
 你打開(kāi)firebug看看dom，確實(shí)也是如此，從這點(diǎn)看來(lái)，似乎沒(méi)有刻意去使用ext的必要，誠(chéng)然，如果單單要一個(gè)輸入框，不管添入什么數(shù)據(jù)，就點(diǎn)擊發(fā)
 送到后臺(tái)，的確是不需要ext呢。你不想用一些默認(rèn)的數(shù)據(jù)校驗(yàn)嗎？你不想在數(shù)據(jù)校驗(yàn)失敗的時(shí)候，有一些突出的提示效果嗎？你不想要超炫的下拉列
 表combox嗎？你不想要一些你做夢(mèng)才能朦朧看到的選擇控件嗎？唉，要是你也像我一樣禁不起誘惑，勸你還是隨著欲望的節(jié)拍，試一下ext的form和輸
 入控件。
 4.2. 慢慢來(lái)，先建一個(gè)form再說(shuō)

var form = new Ext.form.Form({

    labelAlign: 'right',

    labelWidth: 50

});

form.add(new Ext.form.TextField({

    fieldLabel: '文本框'

}));

form.addButton("按鈕");

form.render("form");

簡(jiǎn)單來(lái)說(shuō)，就是構(gòu)造了一個(gè)form，然后在里邊放一個(gè)TextField，再放一個(gè)按鈕，最后執(zhí)行渲染命令，在id="form"的地方畫(huà)出form和里邊包含的所有輸

入框和按鈕來(lái)。刷拉一下就都出來(lái)了。不過(guò)即使這樣，圓角邊框可不是form自帶的，稍稍做一下處理，參見(jiàn)html里的寫(xiě)法。

開(kāi)頭結(jié)尾那些div就是建立圓角的，有了這些我們都可以在任何地方使用這種圓角形式了，不限于form喲。

2.0里的FormPanel跟1.x里已經(jīng)基本完全不一樣了，咱們先看個(gè)簡(jiǎn)單例子：

代碼如下：

html里不需要那么多東西了，只需要定義一個(gè)div id="form"就可以實(shí)現(xiàn)這一切。明顯可以感覺(jué)到初始配置更緊湊，利用items和buttons指定包含的控件和按鈕。

4.3. 胡亂掃一下輸入控件
兄弟們應(yīng)該都有html開(kāi)發(fā)的經(jīng)驗(yàn)了，像什么input用的不在少數(shù)了，所以咱們?cè)谶@里也不必浪費(fèi)唾沫，大概掃兩眼也知道ext的輸入控件是做什么的。

像TextField，TextArea，NumberField這類當(dāng)然是可以隨便輸入的了。

ComboBox，DateField繼承自TriggerField。他們長(zhǎng)相差不多，都是一個(gè)輸入框右邊帶一個(gè)圖片，點(diǎn)擊以后就跳出一大堆東西來(lái)讓你選擇，輸入框里頭顯示的是你選中的東西。

Checkbox和Radio，ext沒(méi)有過(guò)多封裝，基本上還是原來(lái)的方式。

Button，這個(gè)東東其實(shí)就是一個(gè)好看的div，跟comboBox一樣，不是對(duì)原有組件的美化，而是重新做的輪子。你可以選擇用以前那種難看的type="button"，還是用咱們漂亮的div，看你的愛(ài)好了。type="submit"和type="reset"也一樣沒(méi)有對(duì)應(yīng)的組件，都使用Button好了。

文件上傳框，type="file"，因?yàn)闉g覽器的安全策略，想上傳文件，必須使用type="file"，而且我們不能使用js修改上傳框的值，所以非常郁悶，目前的方式是把它隱藏起來(lái)，然后在點(diǎn)擊咱們漂亮的Button時(shí)，觸發(fā)上傳框的點(diǎn)擊事件，從而達(dá)到上傳的目的。在這方面extjs.com論壇上有不少實(shí)現(xiàn)上傳的擴(kuò)展控件，咱們可以參考一下。

4.4. 起點(diǎn)高撒，從comboBox往上蹦。
我覺(jué)得像TextField啊，TextArea啊，都是在原來(lái)的東西上隨便加了幾筆css弄出來(lái)的，大家都會(huì)用，所以沒(méi)什么大搞頭，最后綜合起來(lái)一說(shuō)就ok了。而這個(gè)comboBox跟原有的select一點(diǎn)兒關(guān)系都沒(méi)有，完全是用div重寫(xiě)畫(huà)的。所以，嘿嘿~

耳聽(tīng)為虛，眼見(jiàn)為實(shí)，先看看所謂的comboBox究竟是個(gè)什么模樣。
 

雀躍吧！超脫了一切的彈出窗口

5.1. 呵呵~跳出來(lái)和縮回去總給人驚艷的感覺(jué)。
瀏覽器原聲的alert()，confirm()，prompt()顯得如此寒酸，而且還不能靈活配置，比如啥時(shí)候想加個(gè)按鈕，刪個(gè)按鈕，或者改改按下按鈕觸發(fā)的事件了，都是難上加難的事情。

既然如此，為何不同ext提供的對(duì)話框呢？那么漂亮，那么好配置，可以拖啊，可以隨便放什么東西，在里邊用啥控件都可以，甚至放幾個(gè)tab亂切換呀，連最小化窗口的功能都提供了。哈哈，神奇啊，完全可以讓alert退役了。

5.2. 先看看最基本的三個(gè)例子
嘿嘿，為了加深認(rèn)識(shí)，還是先去看看examples下的例子吧。1.x在dialog目錄下。2.0在message-box目錄下。

5.2.1. Ext.MessageBox.alert()

Ext.MessageBox.alert('標(biāo)題', '內(nèi)容', function(btn) {
    alert('你剛剛點(diǎn)擊了 ' + btn);
});

現(xiàn)在可以通過(guò)第一個(gè)參數(shù)修改窗口的標(biāo)題，第二個(gè)參數(shù)決定窗口的的內(nèi)容，第三個(gè)參數(shù)是你關(guān)閉按鈕之后（無(wú)論是點(diǎn)ok按鈕還是右上角那個(gè)負(fù)責(zé)關(guān)閉的小叉叉），就會(huì)執(zhí)行的函數(shù)，嘿嘿，傳說(shuō)中的回調(diào)函數(shù)。

5.2.2. Ext.MessageBox.confirm()

Ext.MessageBox.confirm('選擇框', '你到底是選擇yes還是no？', function(btn) {
    alert('你剛剛點(diǎn)擊了 ' + btn);
});

選擇yes或者是no，然后回調(diào)函數(shù)里可以知道你到底是選擇了哪個(gè)東東。

5.2.3. Ext.MessageBox.prompt()

Ext.MessageBox.prompt('輸入框', '隨便輸入一些東西', function(btn, text) {
    alert('你剛剛點(diǎn)擊了 ' + btn + '，剛剛輸入了 ' + text);
});

隨便輸入幾個(gè)字，然后點(diǎn)按鈕，它會(huì)告訴你輸入了些什么東西

5.3. 如果你想的話，可以控制得更多
5.3.1. 可以輸入多行的輸入框

Ext.MessageBox.show({
    title: '多行輸入框',
    msg: '你可以輸入好幾行',
    width:300,
    buttons: Ext.MessageBox.OKCANCEL,
    multiline: true,
    fn: function(btn, text) {
        alert('你剛剛點(diǎn)擊了 ' + btn + '，剛剛輸入了 ' + text);
    }
});

其實(shí)只需要show，我們就可以構(gòu)造各種各樣的窗口了，title代表標(biāo)題，msg代表輸出的內(nèi)容，buttons是顯示按鈕，multiline告訴我們可以輸入好幾行，最后用fn這個(gè)回調(diào)函數(shù)接受我們想要得到的結(jié)果。

5.3.2. 再看一個(gè)例子唄
可能讓我們對(duì)show這個(gè)方法的理解更深

Ext.MessageBox.show({
    title:'隨便按個(gè)按鈕',
    msg: '從三個(gè)按鈕里隨便選擇一個(gè)',
    buttons: Ext.MessageBox.YESNOCANCEL,
    fn: function(btn) {
        alert('你剛剛點(diǎn)擊了 ' + btn);
    }
});

我相信buttons這個(gè)參數(shù)是一個(gè)數(shù)組，里邊的這個(gè)參數(shù)絕對(duì)了應(yīng)該顯示哪些按鈕，Ext.MessageBox給我們提供了一些預(yù)先定義好的組合，比如YESNOCANCEL,OKCANCEL，可以直接使用。

5.3.3. 下一個(gè)例子是進(jìn)度條
實(shí)際上只需要將progress這個(gè)屬性設(shè)置為true，對(duì)話框里就會(huì)顯示個(gè)條條。

Ext.MessageBox.show({
    title: '請(qǐng)等待',
    msg: '讀取數(shù)據(jù)中',
    width:240,
    progress:true,
    closable:false
});

看到進(jìn)度條了吧，不過(guò)它可不會(huì)自動(dòng)滾啊滾的，你需要調(diào)用Ext.MessageBox.updateProgress讓進(jìn)度條發(fā)生變化。

另外多說(shuō)一句，closable: false會(huì)隱藏對(duì)話框右上角的小叉叉，這樣咱們就不能隨便關(guān)掉它了。

現(xiàn)在讓咱們加上更新進(jìn)度條的函數(shù)，使用timeout定時(shí)更新，這樣咱們就可以看到效果了。呵呵~效果真不錯(cuò)，這樣咱們以后就可以使用進(jìn)度條了。

var f = function(v){
    return function(){
        if(v == 11){
            Ext.MessageBox.hide();
        }else{
            Ext.MessageBox.updateProgress(v/10, '正在讀取第 ' + v + ' 個(gè)，一共10個(gè)。');
        }
   };
};
for(var i = 1; i < 12; i++){
   setTimeout(f(i), i*1000);
}

5.3.4. 動(dòng)畫(huà)效果，跳出來(lái)，縮回去
超炫效果，讓對(duì)話框好像是從一個(gè)按鈕跳出來(lái)的，關(guān)閉的時(shí)候還會(huì)自己縮回去。你可以看到它從小變大，又從大變小，最后不見(jiàn)了。實(shí)際上的配置缺非常簡(jiǎn)單，加一個(gè)animEl吧。讓我們看看上邊那個(gè)三個(gè)按鈕的例子會(huì)變成什么樣子。

Ext.MessageBox.show({
    title:'隨便按個(gè)按鈕',
    msg: '從三個(gè)按鈕里隨便選擇一個(gè)',
    buttons: Ext.MessageBox.YESNOCANCEL,
    fn: function(btn) {
        alert('你剛剛點(diǎn)擊了 ' + btn);
    },
    animEl: 'dialog'
});

animEl的值是一個(gè)字符串，它對(duì)應(yīng)著html里一個(gè)元素的id，比如<div id="dialog"></div>。指定好了這個(gè)，咱們的對(duì)話框才知道根據(jù)哪個(gè)元素播放展開(kāi)和關(guān)閉的動(dòng)畫(huà)呀。

只需要這樣，咱們就得到動(dòng)畫(huà)效果，嘿嘿，截不到動(dòng)畫(huà)效果的圖，大家自己去看吧。

以上的例子在examples里都可以找到，不過(guò)咱們也提供了一份自己的例子，1.x在lingo-sample/1.1.1/05-01.html。2.0在lingo-sample/2.0/05-01.html。

好消息是，這部分的api沒(méi)有什么改動(dòng)。不過(guò)表現(xiàn)形式上有些差別，如果像我在例子里寫(xiě)的那樣，一次生成N個(gè)MessageBox，只能顯示最后一個(gè)對(duì)話框。

不過(guò)在1.x里明顯有一些數(shù)據(jù)同步的問(wèn)題，1.x里的updateProgress甚至可以影響其他對(duì)話框的msg，以及可以關(guān)閉最后那個(gè)對(duì)話框。2.0里至少是好的

5.4. 讓彈出窗口，顯示我們想要的東東，比如表格
2.0需要window來(lái)完成這個(gè)任務(wù)，1.x版的BasicDialog稍后加上。

5.4.1. 2.0的彈出表格哦
稍微說(shuō)一下window咋用呢？其實(shí)看起來(lái)跟MessageBox差不多啦，只是可以在里邊隨便放東西，現(xiàn)在先看個(gè)單純的例子。

var win = new Ext.Window({
    el:'window-win',
    layout:'fit',
    width:500,
    height:300,
    closeAction:'hide',

    items: [{}],

    buttons: [{
        text:'按鈕'
    }]
});
win.show();

首先要講明的是，這個(gè)window需要一個(gè)對(duì)應(yīng)的div呀，就像el對(duì)應(yīng)的'window-win'一樣，這個(gè)div的id就應(yīng)該等于'window-win'，然后設(shè)置寬和高，這些都很明朗。
其次，需要設(shè)置的是布局類型，layout:'fit'說(shuō)明布局會(huì)適應(yīng)整個(gè)window的大小，估計(jì)改變大小的時(shí)候也要做響應(yīng)的改變。
closeAction:'hide'是一個(gè)預(yù)設(shè)值，簡(jiǎn)單來(lái)說(shuō)就是你用鼠標(biāo)點(diǎn)了右上角的叉叉，會(huì)執(zhí)行什么操作，這里就是隱藏啦。問(wèn)為啥是隱藏？因?yàn)?，因?yàn)轭A(yù)設(shè)啦，乖，背下來(lái)撒。
items部分，嘿嘿~就是告訴咱們的window里要有什么內(nèi)容啦。這里放表格，放樹(shù)形，吼吼。
buttons里設(shè)置在底端顯示的按鈕。我們就為了試一下，弄了一個(gè)按鈕，但是按了沒(méi)反應(yīng)，嘿嘿。
最后調(diào)用一下show()，讓窗口顯示出來(lái)。


中間的空白就是items:[{}]的杰作，默認(rèn){}會(huì)成為一個(gè)Ext.Panel，咱們什么都沒(méi)定義，里邊自然什么都沒(méi)有。當(dāng)然500*300不會(huì)只有這么大，但是為了讓圖片小一點(diǎn)兒，我把它拖下了，嘿嘿~自動(dòng)支持的修改大小效果，帥吧？

5.4.2. 向2.0的window里加表格
唉，地方都劃出來(lái)了，弄個(gè)表格放進(jìn)去就好了唄。

首先弄一個(gè)grid，超簡(jiǎn)單那種。我是直接把第二章的例子給copy了過(guò)來(lái)，嘿嘿，表格還是那個(gè)表格喲。

有了表格，直接扔到window里，然后ok，哈哈~效果如下：

第一，grid不用調(diào)用render()了，只要加入了window，在win.show()的時(shí)候，會(huì)自動(dòng)渲染里邊的組件。
第二，html里，要把grid對(duì)應(yīng)的div寫(xiě)到window的div里面，嵌套關(guān)系。

<div id="window-win">
    <div id="grid"></div>
</div>

第三，如果還不知道怎么把grid放進(jìn)window里，我給你看下代碼。

var win = new Ext.Window({
    el:'window-win',
    layout:'fit',
    width:500,
    height:300,
    closeAction:'hide',

    items: [grid],

    buttons: [{
        text:'按鈕'
    }]
});

看到items:[grid]了嗎？就這么簡(jiǎn)單喲。