首先，一個表格應該有列定義，即定義表頭ColumnModel：
// 定義一個ColumnModel，表頭中有四列
var cm = new Ext.grid.ColumnModel([
     {header:'編號',dataIndex:'id'},
     {header:'性別',dataIndex:'sex'},
     {header:'名稱',dataIndex:'name'},
     {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
    該ColumnModel定義了表格的四個列，其每列的名稱和對應的數據鍵。請注意defaultSortable屬性，即為每個列都安上一個可以排序的功能。如果只想某些列舉有該功能，可以設置：
{header:'編號',dataIndex:'id',Sortable:true},

現在就來看看這個Ext.data.Store是如何轉換三種數據的。

1.二維數組：
// ArrayData
var data = [
     ['1','male','name1','descn1'],
     ['2','male','name1','descn2'],
     ['3','male','name3','descn3'],
     ['4','male','name4','descn4'],
     ['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
     proxy: new Ext.data.MemoryProxy(data),
     reader: new Ext.data.ArrayReader({}, [
        {name: 'id',mapping: 0},
         {name: 'sex',mapping: 1},
         {name: 'name',mapping: 2},
         {name: 'descn',mapping: 3}
     ])
});
ds.load();
ds要對應兩個部分：proxy和reader。proxy告訴我們從哪里獲得數據，reader告訴我們如何解析這個數據。
現在用的是Ext.data.MemoryProxy，它將內存中的數據data作為參數傳遞。Ext.data.ArrayReader專門用來解析數組，并且告訴我們它會按照定義的規范進行解析，每行按順序讀取四個數據，第一個叫id，第二個叫sex，第三個叫name，第四個descn。這些是跟cm定義中的dataIndex對應的。這樣cm就知道哪列應該顯示那條數據了。
mapping屬性用于標記data中的讀取后的數據與標頭的映射關系，一般是不用設置的。但如果我們想讓sex的數據中name欄中出現，可以設置mapping值。即id的mapping為2,后者為0。
記得要執行一次ds.load()，對數據進行初始化。

數據的顯示顯得非常簡單：
HTML文件：
<div id='grid'></div>
JS文件：
var grid = new Ext.grid.GridPanel({
     el: 'grid',
     ds: ds,
     cm: cm
});
grid.render();

其顯示結果為：

2.如何在表格中添加CheckBox呢？

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),//自動行號
    sm,//添加的地方
    {header:'編號',dataIndex:'id'},
    {header:'性別',dataIndex:'sex'},
    {header:'名稱',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,//添加的地方
    title: 'HelloWorld'
});

3. 如何做Grid上觸發事件呢？
下面是一個cellclick事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);   //Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
    var data = record.get(fieldName);
    Ext.MessageBox.alert('show','當前選中的數據是'+data);
}

4.如何做Grid中做出快捷菜單效果：
grid.addListener('rowcontextmenu', rightClickFn);//右鍵菜單代碼關鍵部分
var rightClick = new Ext.menu.Menu({
    id:'rightClickCont', //在HTML文件中必須有個rightClickCont的DIV元素
    items: [
        {
            id: 'rMenu1',
            handler: rMenu1Fn,//點擊后觸發的事件
            text: '右鍵菜單1'
        },
        {
            //id: 'rMenu2',
            //handler: rMenu2Fn,
            text: '右鍵菜單2'
        }
    ]
});
function rightClickFn(grid,rowindex,e){
    e.preventDefault();
    rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
   Ext.MessageBox.alert('right','rightClick');
}
其Grid如下：

5.如何將一列中的數據根據要求進行改變呢？
比如說性別字段根據其male或female改變顯示的顏色，這種ColumnMode中設計：
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'編號',dataIndex:'id'},
    {header:'性別',dataIndex:'sex',renderer:changeSex},
    {header:'名稱',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

function changeSex(value){
    if (value == 'male') {
        return "<span style='color:red;font-weight:bold;'>紅男</span>";
    } else {
        return "<span style='color:green;font-weight:bold;'>綠女</span>";
    }
}

其它兩種數據的Grid顯示是相同的，其不同之處在于數據獲取的過程：

6.Json數據
至于這種數據的類型請大家自己看Ajax的書籍：
//JsonData
var data = {
    'coders': [
        { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },
        { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },
        { 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' },
        { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }
    ],
    'musicians': [
        { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
        { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
    ]
}
//ds使用的MemoryProxy對象和JsonReader對象
var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.JsonReader({root: 'coders'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
ds.load();

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    autoHeight: true//一定要寫，否則顯示的數據會少一行
});
grid.render();

7.使用XML數據：
注意，讀取XML數據必須在服務器上進行。
XML數據test.xml的內容：
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
     <results>2</results>
     <item>
           <id>1</id>
           <sex>male</sex>
           <name>Taylor</name>
           <descn>Coder</descn>
     </item>
</dataset>var ds3 = new Ext.data.Store({
    url: 'test.xml',   //XML數據
    reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader對象
        {name: 'id'},
        {name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ])
});

8.從服務器獲取數據和數據翻頁控件
從一個服務器文件，如ASP、JSP或Servlet中獲得數據二維Array、JSON或XML數據，也可以被Ext讀取，并被Grid顯示：
服務器文件data.asp:
<%
    start = cint(request("start"))
    limit = cint(request("limit"))

    dim json
    json=cstr("{totalProperty:100,root:[")
   
    for i = start to limit + start-1
        json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
        if i <> limit + start - 1 then
            json =json + ","
        end if
    next
    json = json +"]}"
    response.write(json)
%>

我們可以看到，這個頁面會根據傳入的start和limit的不同，返回不同的數據，其實質是個分頁的代碼。下面是start=0,limit=10的JSON數據：
{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}

我們使用分頁控件來控制Grid的數據：
Ext.onReady(function(){
    var sm = new Ext.grid.CheckboxSelectionModel();
   
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'編號',dataIndex:'id'},
        {header:'性別',dataIndex:'sex'},
        {header:'名稱',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);
    cm.defaultSortable = true;

    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'data.asp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds.load({params:{start:0,limit:10}});
   
    var grid = new Ext.grid.GridPanel({
        el: 'grid3',
        ds: ds,
        cm: cm,
        sm: sm,
        title: 'ASP->JSON',
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
            emptyMsg: "沒有記錄"
        }),
        tbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
            emptyMsg: "沒有記錄"
        })
    });
    grid.render();
})

10.如何在Grid的上方添加按鈕呢？
添加按鈕的關鍵之處在于tbar或bbar屬性設置Toolbar工具條：
var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    tbar: new Ext.Toolbar({
        items:[
                {
                    id:'buttonA'
                    ,text:"Button A"
                    ,handler: function(){ alert("You clicked Button A"); }
                }
                ,
                new Ext.Toolbar.SplitButton({})
                ,{
                    id:'buttonB'
                    ,text:"Button B"
                    ,handler: function(){ alert("You clicked Button B"); }
                }
                ,
                '-'
                ,{
                    id:'buttonc'
                    ,text:"Button c"
                }
            ]
        })
});

11.將GridPanel放入一個Panel或TabPanel中
var tabs = new Ext.TabPanel({
    collapsible: true
    ,renderTo: 'product-exceptions'
    ,width: 450
    ,height:400
    ,activeTab: 0
    ,items:[
        {
            title: 'Unmatched'
        },{
            title: 'Matched'
        }
    ]
});
tabs.doLayout();

var panel = new Ext.Panel({
    renderTo: 'panel',
    title:'panel',
    collapsible:true,
    width:450,
    height:400,
    items:[grid] //管理grid
});

Panel必須有DIV存在。其包含的Component有items管理。

在實際的網頁開發中，大部分時間都要涉及到Form表單的處理。在Ext框架中也提供了很多這方面的控件，而且還有一個專門的FormPanel布 局，該布局默認為放在面板上面的所有控件都是換行放置，而在實際應用中為了美觀，有些需要橫排，特別是Radio控件，這個時候就需要我們重新定制這些控 件的布局了，該例子中使用CSS來實現這些功能，先貼出一張效果圖。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ext中FormPanel面板及Form控件橫排測試(CSS)</title>
<link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" />
<style type="text/css" media="all">
.allow-float {clear:none!important;} /* 允許該元素浮動 */
.stop-float {clear:both!important;} /* 阻止該元素浮動 */
.sex-male {float:left;}
.sex-female {float:left;padding:0 0 0 20px;}
.age-field {float:left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}
</style>
</head>
<body>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
<script type="text/javascript">
Ext.onReady(function() {
//創建Form面板
var fp = new Ext.form.FormPanel({
buttonAlign:'center',
labelAlign:'right',
labelWidth:40,
frame:true,
bodyStyle:'padding:8px 0 0 0;',
items:[{
xtype:'textfield',
fieldLabel:'姓名',
name:'n_username',
id:'i_username',
width:320
},{
xtype:'radio',
fieldLabel:'性別',
boxLabel:'男',
name:'sex',
id:'male',
itemCls:'sex-male', //向左邊浮動,處理控件橫排
clearCls:'allow-float', //允許兩邊浮動,在實際生成的HTML結構中有專門的DIV阻斷浮動
checked:true
},{
xtype:'radio',
boxLabel:'女',
name:'sex',
id:'female',
itemCls:'sex-female', //向左浮動,處理控件橫排
clearCls:'allow-float', //允許兩邊浮動
hideLabel:true //不顯示前面"性別"的標簽
},{
xtype:'textfield',
fieldLabel:'年齡',
name:'n_age',
id:'i_age',
itemCls:'age-field', //向左浮動,處理控件橫排
width:133
},{
xtype:'textfield',
fieldLabel:'住址',
name:'n_address',
id:'i_address',
itemCls:'stop-float', //不允許浮動,結束控件橫排
width:320
}],
buttons:[{
text:'確定',
handler:onOK //實際應用一般是處理fp.getForm.submit()事件
}, {
text:'重置',
handler:function(){ fp.getForm().reset(); }
}],
keys:[{ //處理鍵盤回車事件
key:Ext.EventObject.ENTER,
fn:onOK,
scope:this
}]
});

//創建主窗口
new Ext.Window({
title:’Ext中FormPanel面板及Form控件橫排測試(CSS)’,
width:400,
closable:false,
collapsible:true,
draggable:false,
resizable:false,
modal:true,
border:false,
items:[fp],
buttons:[]
}).show();
});
</script>
</body>
</html>

Js代碼

1. var Tree = Ext.tree;   
2.       
3.   deptTree = new Tree.TreePanel({   
4.       el : elementId,   
5.       autoScroll:true,   
6.       animate:true,   
7.       enableDD:true,   
8.       containerScroll: true,    
9.       loader: new Tree.TreeLoader({   
10.           dataUrl: CONTEXT_PATH + "/depts/deptTree.do",   
11.           baseParams: filter   
12.       })   
13.   });      
14.      
15.   // set the root node   
16.   root = new Tree.AsyncTreeNode({   
17.       text: rootDesc,   
18.       draggable:false,   
19.       id:'-1'  
20.   });   
21.   deptTree.setRootNode(root);   
22.      
23.   // render the deptTree   
24.   deptTree.render();   
25.   root.expand();      

 		var Tree = Ext.tree;
deptTree = new Tree.TreePanel({
el : elementId,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl: CONTEXT_PATH + "/depts/deptTree.do",
baseParams: filter
})
});
// set the root node
root = new Tree.AsyncTreeNode({
text: rootDesc,
draggable:false,
id:'-1'
});
deptTree.setRootNode(root);
// render the deptTree
deptTree.render();
root.expand();

Js代碼

1.   /**  
2.  * 重新加載樹  
3.  *   
4.  * @param {f}  
5.  *          f 過濾樹的條件 如:{placeid:'xxxxx'}  
6.  */            
7. reload : function (f){   
8.     filter = f;   
9.   
10.     var loader = deptTree.getLoader();   
11.     deptTree.on('beforeload', function(){    
12.             loader.dataUrl = loader.dataUrl ;   
13.             loader.baseParams = filter;   
14.     });   
15.     root.reload();     
16. }  

二、使用

安裝完后你去試，發現沒有用，其實還有一些操作如下：

1、執行這個操作：Window → Preferences → Spket → JavaScript Profiles → New

2、在彈出框中輸入ExtJs,然后點OK。

3、然后選擇ExtJs點Add Library,把你下載的ext包中找到/source/ext.jsb加載進來

4、然后先中ExtJs點擊右邊的default按鈕.

5、然后點擊確定就搞定。你現在有eclipse中建立一個JS用Ext.就會出現提示咯！！！

tree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}, tree);

演示(demo)地址在文章最后.

效果圖如下:

源代碼包括 0005_checkbox_reorder.html,0005_checkbox_reorder_tree.php.

0005_checkbox_reorder.html

Ext2.X提供了簡單的checkbox實現,但對于一些復雜的需求,如: 級聯多選(選中父結點,自選中其所有子結點和所有父結點) , 單選等等, Ext2.X并沒有幫我們實現

還有最難解決的情況, 當樹是異步的時候, 要想級聯多選, 實現起來有些難度

在此, 通過對Ext.tree.TreeNodeUI進行擴展,這些問題都得到很好的解決

Js代碼

1. /**  
2.  * @class Ext.tree.TreeCheckNodeUI  
3.  * @extends Ext.tree.TreeNodeUI  
4.  *   
5.  * 對 Ext.tree.TreeNodeUI 進行checkbox功能的擴展,后臺返回的結點信息不用非要包含checked屬性  
6.  *   
7.  * 擴展的功能點有：  
8.  * 一、支持只對樹的葉子進行選擇  
9.  *    只有當返回的樹結點屬性leaf = true 時，結點才有checkbox可選  
10.  *    使用時，只需在聲明樹時，加上屬性 onlyLeafCheckable: true 既可，默認是false  
11.  *   
12.  * 二、支持對樹的單選  
13.  *    只允許選擇一個結點  
14.  *    使用時，只需在聲明樹時，加上屬性 checkModel: "single" 既可  
15.  *   
16.  * 二、支持對樹的級聯多選   
17.  *    當選擇結點時，自動選擇該結點下的所有子結點，以及該結點的所有父結點（根結點除外），特別是支持異步，當子結點還沒顯示時，會從后臺取得子結點，然后將其選中/取消選中  
18.  *    使用時，只需在聲明樹時，加上屬性 checkModel: "cascade" 既可  
19.  *   
20.  * 三、添加"check"事件  
21.  *    該事件會在樹結點的checkbox發生改變時觸發  
22.  *    使用時，只需給樹注冊事件,如：  
23.  *    tree.on("check",function(node,checked){...});  
24.  *   
25.  * 默認情況下，checkModel為'multiple'，也就是多選，onlyLeafCheckable為false，所有結點都可選  
26.  *   
27.  * 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.  
28.  * 例如：  
29.  *   var tree = new Ext.tree.TreePanel({  
30.  *      el:'tree-ct',  
31.  *      width:568,  
32.  *      height:300,  
33.  *      checkModel: 'cascade',   //對樹的級聯多選  
34.  *      onlyLeafCheckable: false,//對樹所有結點都可選  
35.  *      animate: false,  
36.  *      rootVisible: false,  
37.  *      autoScroll:true,  
38.  *      loader: new Ext.tree.DWRTreeLoader({  
39.  *          dwrCall:Tmplt.getTmpltTree,  
40.  *          baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 屬性  
41.  *      }),  
42.  *      root: new Ext.tree.AsyncTreeNode({ id:'0' })  
43.  *  });  
44.  *  tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注冊"check"事件  
45.  *  tree.render();  
46.  *   
47.  */  
48.   
49. Ext.tree.TreeCheckNodeUI = function() {   
50.     //'multiple':多選; 'single':單選; 'cascade':級聯多選   
51.     this.checkModel = 'multiple';   
52.        
53.     //only leaf can checked   
54.     this.onlyLeafCheckable = false;   
55.        
56.     Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);   
57. };   
58.   
59. Ext.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {   
60.   
61.     renderElements : function(n, a, targetNode, bulkRender){   
62.         var tree = n.getOwnerTree();   
63.         this.checkModel = tree.checkModel || this.checkModel;   
64.         this.onlyLeafCheckable = tree.onlyLeafCheckable || false;   
65.            
66.         // add some indent caching, this helps performance when rendering a large tree   
67.         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';   
68.   
69.     var cb = (!this.onlyLeafCheckable || a.leaf);   
70.         var href = a.href ? a.href : Ext.isGecko ? "" : "#";   
71.         var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',   
72.             '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",   
73.             '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',   
74.             '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',   
75.             cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',   
76.             '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',   
77.              a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",   
78.             '<ul class="x-tree-node-ct" style="display:none;"></ul>',   
79.             "</li>"].join('');   
80.   
81.         var nel;   
82.         if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){   
83.             this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);   
84.         }else{   
85.             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);   
86.         }   
87.            
88.         this.elNode = this.wrap.childNodes[0];   
89.         this.ctNode = this.wrap.childNodes[1];   
90.         var cs = this.elNode.childNodes;   
91.         this.indentNode = cs[0];   
92.         this.ecNode = cs[1];   
93.         this.iconNode = cs[2];   
94.         var index = 3;   
95.         if(cb){   
96.             this.checkbox = cs[3];   
97.             Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));   
98.             index++;   
99.         }   
100.         this.anchor = cs[index];   
101.         this.textNode = cs[index].firstChild;   
102.     },   
103.        
104.     // private   
105.     check : function(checked){   
106.         var n = this.node;   
107.         var tree = n.getOwnerTree();   
108.         this.checkModel = tree.checkModel || this.checkModel;   
109.            
110.         if( checked === null ) {   
111.             checked = this.checkbox.checked;   
112.         } else {   
113.             this.checkbox.checked = checked;   
114.         }   
115.            
116.         n.attributes.checked = checked;   
117.         tree.fireEvent('check', n, checked);   
118.            
119.         if(!this.onlyLeafCheckable && this.checkModel == 'cascade'){   
120.             var parentNode = n.parentNode;   
121.             if(parentNode !== null) {   
122.                 this.parentCheck(parentNode,checked);   
123.             }   
124.             if( !n.expanded && !n.childrenRendered ) {   
125.                 n.expand(false,false,this.childCheck);   
126.             }   
127.             else {   
128.                 this.childCheck(n);   
129.             }   
130.         }else if(this.checkModel == 'single'){   
131.             var checkedNodes = tree.getChecked();   
132.             for(var i=0;i<checkedNodes.length;i++){   
133.                 var node = checkedNodes[i];   
134.                 if(node.id != n.id){   
135.                     node.getUI().checkbox.checked = false;   
136.                     node.attributes.checked = false;   
137.                     tree.fireEvent('check', node, false);   
138.                 }   
139.             }   
140.         }   
141.            
142.     },   
143.        
144.     // private   
145.     childCheck : function(node){   
146.         var a = node.attributes;   
147.         if(!a.leaf) {   
148.             var cs = node.childNodes;   
149.             var csui;   
150.             for(var i = 0; i < cs.length; i++) {   
151.                 csui = cs[i].getUI();   
152.                 if(csui.checkbox.checked ^ a.checked)   
153.                     csui.check(a.checked);   
154.             }   
155.         }   
156.     },   
157.        
158.     // private   
159.     parentCheck : function(node ,checked){   
160.         var checkbox = node.getUI().checkbox;   
161.         if(typeof checkbox == 'undefined')return ;   
162.         if(!(checked ^ checkbox.checked))return;   
163.         if(!checked && this.childHasChecked(node))return;   
164.         checkbox.checked = checked;   
165.         node.attributes.checked = checked;   
166.         node.getOwnerTree().fireEvent('check', node, checked);   
167.            
168.         var parentNode = node.parentNode;   
169.         if( parentNode !== null){   
170.             this.parentCheck(parentNode,checked);   
171.         }   
172.     },   
173.        
174.     // private   
175.     childHasChecked : function(node){   
176.         var childNodes = node.childNodes;   
177.         if(childNodes || childNodes.length>0){   
178.             for(var i=0;i<childNodes.length;i++){   
179.                 if(childNodes[i].getUI().checkbox.checked)   
180.                     return true;   
181.             }   
182.         }   
183.         return false;   
184.     },   
185.        
186.     toggleCheck : function(value){   
187.         var cb = this.checkbox;   
188.         if(cb){   
189.             var checked = (value === undefined ? !cb.checked : value);   
190.             this.check(checked);   
191.         }   
192.     }   
193. });  

/**
* @class Ext.tree.TreeCheckNodeUI
* @extends Ext.tree.TreeNodeUI
*
* 對 Ext.tree.TreeNodeUI 進行checkbox功能的擴展,后臺返回的結點信息不用非要包含checked屬性
*
* 擴展的功能點有：
* 一、支持只對樹的葉子進行選擇
*    只有當返回的樹結點屬性leaf = true 時，結點才有checkbox可選
*    使用時，只需在聲明樹時，加上屬性 onlyLeafCheckable: true 既可，默認是false
*
* 二、支持對樹的單選
*    只允許選擇一個結點
*    使用時，只需在聲明樹時，加上屬性 checkModel: "single" 既可
*
* 二、支持對樹的級聯多選
*    當選擇結點時，自動選擇該結點下的所有子結點，以及該結點的所有父結點（根結點除外），特別是支持異步，當子結點還沒顯示時，會從后臺取得子結點，然后將其選中/取消選中
*    使用時，只需在聲明樹時，加上屬性 checkModel: "cascade" 既可
*
* 三、添加"check"事件
*    該事件會在樹結點的checkbox發生改變時觸發
*    使用時，只需給樹注冊事件,如：
*    tree.on("check",function(node,checked){...});
*
* 默認情況下，checkModel為'multiple'，也就是多選，onlyLeafCheckable為false，所有結點都可選
*
* 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.
* 例如：
*   var tree = new Ext.tree.TreePanel({
*  el:'tree-ct',
*  width:568,
*  height:300,
*  checkModel: 'cascade',   //對樹的級聯多選
*  onlyLeafCheckable: false,//對樹所有結點都可選
*  animate: false,
*  rootVisible: false,
*  autoScroll:true,
*  loader: new Ext.tree.DWRTreeLoader({
*   dwrCall:Tmplt.getTmpltTree,
*   baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 屬性
*  }),
*  root: new Ext.tree.AsyncTreeNode({ id:'0' })
* });
* tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注冊"check"事件
* tree.render();
*
*/
Ext.tree.TreeCheckNodeUI = function() {
//'multiple':多選; 'single':單選; 'cascade':級聯多選
this.checkModel = 'multiple';
//only leaf can checked
this.onlyLeafCheckable = false;
Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);
};
Ext.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {
renderElements : function(n, a, targetNode, bulkRender){
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;
this.onlyLeafCheckable = tree.onlyLeafCheckable || false;
// add some indent caching, this helps performance when rendering a large tree
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
var cb = (!this.onlyLeafCheckable || a.leaf);
var href = a.href ? a.href : Ext.isGecko ? "" : "#";
var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
'<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>"].join('');
var nel;
if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
}else{
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
}
this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
var index = 3;
if(cb){
this.checkbox = cs[3];
Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
},
// private
check : function(checked){
var n = this.node;
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;
if( checked === null ) {
checked = this.checkbox.checked;
} else {
this.checkbox.checked = checked;
}
n.attributes.checked = checked;
tree.fireEvent('check', n, checked);
if(!this.onlyLeafCheckable && this.checkModel == 'cascade'){
var parentNode = n.parentNode;
if(parentNode !== null) {
this.parentCheck(parentNode,checked);
}
if( !n.expanded && !n.childrenRendered ) {
n.expand(false,false,this.childCheck);
}
else {
this.childCheck(n);
}
}else if(this.checkModel == 'single'){
var checkedNodes = tree.getChecked();
for(var i=0;i<checkedNodes.length;i++){
var node = checkedNodes[i];
if(node.id != n.id){
node.getUI().checkbox.checked = false;
node.attributes.checked = false;
tree.fireEvent('check', node, false);
}
}
}
},
// private
childCheck : function(node){
var a = node.attributes;
if(!a.leaf) {
var cs = node.childNodes;
var csui;
for(var i = 0; i < cs.length; i++) {
csui = cs[i].getUI();
if(csui.checkbox.checked ^ a.checked)
csui.check(a.checked);
}
}
},
// private
parentCheck : function(node ,checked){
var checkbox = node.getUI().checkbox;
if(typeof checkbox == 'undefined')return ;
if(!(checked ^ checkbox.checked))return;
if(!checked && this.childHasChecked(node))return;
checkbox.checked = checked;
node.attributes.checked = checked;
node.getOwnerTree().fireEvent('check', node, checked);
var parentNode = node.parentNode;
if( parentNode !== null){
this.parentCheck(parentNode,checked);
}
},
// private
childHasChecked : function(node){
var childNodes = node.childNodes;
if(childNodes || childNodes.length>0){
for(var i=0;i<childNodes.length;i++){
if(childNodes[i].getUI().checkbox.checked)
return true;
}
}
return false;
},
toggleCheck : function(value){
var cb = this.checkbox;
if(cb){
var checked = (value === undefined ? !cb.checked : value);
this.check(checked);
}
}
});

el決定了樹的顯示位置，一般是個div例如