首先，一个表格应该有列定义，即定义表头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例如