extjs的語法很像java，對于這些組件的使用基本都是面向?qū)ο蟮摹＝裉爝@部分內(nèi)容，和swing 非常相似。
現(xiàn)亮一個window給大家看看：

對于這種var win = new Ext.Window()方式創(chuàng)建對象是不是感覺很親切？
看看就這么2行代碼產(chǎn)生的效果吧：

漂亮并不需要寫多少代碼。其實這里還有很多可以添加的效果，比如常見的：
    
    plain:true,（默認(rèn)不是）
    resizable:false,(是否可以改變大小，默認(rèn)可以)
    maximizable:true,（是否增加最大化，默認(rèn)沒有）
    draggable:false,（是否可以拖動，默認(rèn)可以）
    minimizable:true,（是否增加最小化，默認(rèn)無）
   closable:false,（是否顯示關(guān)閉，默認(rèn)有關(guān)閉）


而pannel 和window是差不多的，比如構(gòu)造參數(shù)我都可以直接通用:

和上面對比的話只是顯示函數(shù)不同，而panel是將顯示的面板放到了一個div里（這么說有一點不妥），或者說參數(shù)傳了個div的id 。其實也可以直接在參數(shù)中加上renderTo:"hello" ，而避免再另外調(diào)用render函數(shù)。
要想面板能收攏，加上collapsible 屬性就好了。如下面代碼。

對應(yīng)效果：






一些常見配置參數(shù)：

1.autoLoad：有效的url字符串，把那個url中的body中的數(shù)據(jù)加載顯示，但是可能沒有樣式和js控制，只是html數(shù)據(jù)
2.autoScroll:設(shè)為true則內(nèi)容溢出的時候產(chǎn)生滾動條，默認(rèn)為false
3.autoShow:設(shè)為true顯示設(shè)為"x-hidden"的元素，很有必要，默認(rèn)為false

4.bbar:底部條，顯示在主體內(nèi)，//代碼：bbar:[{text:'底部工具欄bottomToolbar'}],
5.tbar:頂部條，顯示在主體內(nèi)，//代碼:tbar:[{text:'頂部工具欄topToolbar'}],
6.buttons:按鈕集合，自動添加到footer中（footer參數(shù)，顯示在主體外）//代碼：buttons:[{text:"按鈕位于footer"}]
7.buttonAlign:footer中按鈕的位置，枚舉值為："left","right","center",默認(rèn)為right

8.collapsible：設(shè)為true，顯示右上角的收縮按鈕，默認(rèn)為false
9.draggable:true則可拖動，但需要你提供操作過程，默認(rèn)為false

10.html:主體的內(nèi)容
11.id：id值，通過id可以找到這個組件，建議一般加上這個id值
12.width：寬度
13.height：高度
13.title:標(biāo)題

14.titleCollapse：設(shè)為true，則點擊標(biāo)題欄的任何地方都能收縮，默認(rèn)為false.

15.applyTo：（id）呈現(xiàn)在哪個html元素里面
16.contentEl：（id）呈現(xiàn)在哪個html元素里面，把el內(nèi)的內(nèi)容呈現(xiàn)
17.renderTo：（id）呈現(xiàn)在哪個html元素里面
eg：

 Ext.onReady(function()
            {
                var panel = new Ext.Panel(
                {
                    title:"標(biāo)題",
                    width:300,
                    height:200,
                    //frame:true,//圓角 
                    plain:true,//方角 默認(rèn)
                    collapsible:true,
                    tbar:[{text:"按鈕1",handler:function(){Ext.MessageBox.alert("我是按鈕1","我是通過按鈕1激發(fā)出來的彈出框！")}},{text:"按鈕2"}], //頂部工具欄
                                bbar:[{text:"按鈕3"},{text:"按鈕4"}],  //底部工具欄
                    html:'<h1>hello,my name is 274!</h1>',
                                        buttons:[{text:"按鈕5"},{text:"按鈕6"}], //footer部工具欄
                                        buttonAlign:"left"
                });            
                //win.show();
                panel.render("hello");
                
            });                

Tabpanel 使用：

對應(yīng)的顯示效果：

注意上面代碼中使用了items 屬性，表示子面板組。內(nèi)容可以用html 元素ID 。比如：
 items:[
             {contentEl:'script', title: 'Short Text'},
             {contentEl:'markup', title: 'Long Text'}
         ]
這樣這兩個子面板的內(nèi)容將是ID為sript 和markup 的元素內(nèi)容。
也可以，以html屬性直接表示子面板的內(nèi)容：
 items:[
             {html:'script', title: 'Short Text'},
             {html:'markup', title: 'Long Text'}
         ]
語句解釋： defaults:{autoHeight: true}, 默認(rèn)自適應(yīng)高度。當(dāng)然這里面還可以設(shè)置為： defaults:{autoScroll: true},如果設(shè)置為 defaults:{autoScroll: true},高度就最好指定了。

下面還有一個tab面板，其子面板更多了。

我們發(fā)現(xiàn)renderTo 不僅可以綁在div (id) 也可以綁定在：document.body。

而其中比較特別的有：
1.autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
指切換到這個頁面，內(nèi)容顯示為動態(tài)加載的，比如這里用了一個ajax方式，url 發(fā)送目標(biāo)，params是參數(shù)形式。

2.listeners: {activate: handleActivate},
當(dāng)面板切換到這個頁面將觸發(fā)事件：handleActivate

3.disabled:true,
指這個頁面不能點擊。

對于： plain:true, frame:true,
前者是子面板標(biāo)題處樣式，前者并無背景，后者有背景（看起來像個框架），請參看上圖二者效果差異。

而activeTab：0 是指，默認(rèn)顯示（訪問）的是哪一個子面板。0是第一次，如果不指定該屬性，默認(rèn)不顯示子面板內(nèi)容，只有當(dāng)用戶點擊子面板后才顯示。