EXTJs4 TreePanel

EXT4改了不少命名，也同样改了继承结构，更改了部分主键的存储结构。没有深入的看。

	EXT2,3	EXT4	区别
名称	Ext.tree.TreePanel	Ext.tree.panel	简洁了
父类	Ext.Panel	Ext.panel.Table	也是grid的父类，不直接继承panel，中间被提炼了一层
需要关注	Ext.Tree.TreeNode，Ext.Tree.TreeLoader，Ext.tree.TreeNodeUI	Ext.data.Mode,Ext.tree.TreeStore，Ext.tree.View	完全变了
事件名称	比如：click	改为：itemclick	详细见API

用例子说明：
EXT3

Java代码  

1. var tree = new Ext.tree.TreePanel( {   
2.     renderTo : 'tree-div',   
3.     title : 'Tree test',   
4.     height : 300,   
5.     width : 400,   
6.     useArrows : true,   
7.     autoScroll : true,   
8.     containerScroll : true,   
9.     rootVisible : false,   
10.     frame : true,   
11.     root : {   
12.         text : 'Tree Node',   
13.         children : [ {   
14.             text : "detention",   
15.              aa : 'aa',   
16.             leaf : true  
17.         }, {   
18.             text : "homework",   
19.             expanded : true,   
20.             children : [ {   
21.                 text : "book report",   
22.                 leaf : true  
23.             }, {   
24.                 text : "alegrbra",   
25.                 leaf : true  
26.             } ]   
27.         }, {   
28.             text : "buy lottery tickets",   
29.             leaf : true  
30.         } ]   
31.     },   
32.     listeners : {   
33.         'click' : function(node, e) {   
34.             alert(node.attributes.aa);   
35.         }   
36.     }   
37. });  

var tree = new Ext.tree.TreePanel( {
	renderTo : 'tree-div',
	title : 'Tree test',
	height : 300,
	width : 400,
	useArrows : true,
	autoScroll : true,
	containerScroll : true,
	rootVisible : false,
	frame : true,
	root : {
		text : 'Tree Node',
		children : [ {
			text : "detention",
			 aa : 'aa',
			leaf : true
		}, {
			text : "homework",
			expanded : true,
			children : [ {
				text : "book report",
				leaf : true
			}, {
				text : "alegrbra",
				leaf : true
			} ]
		}, {
			text : "buy lottery tickets",
			leaf : true
		} ]
	},
	listeners : {
		'click' : function(node, e) {
			alert(node.attributes.aa);
		}
	}
});

上面这个例子，我直接可以使用node.attributes.aa来得到aa这个值。假如我在EXT4里面这样是得不到AA的值。因为它的存储结构变了。
事件：

Java代码  

1. click : ( Node node, Ext.EventObject e )   

  click : ( Node node, Ext.EventObject e ) 

Node的dom结构：

EXT4 需要这样来：

Java代码  

1.   Ext.define('ctreemodel', {   
2.     extend: 'Ext.data.Model',   
3.     fields: [   
4.         {name: 'aa',  type: 'string'},   
5.         {name: 'text',  type: 'string'}   
6.          ....   
7.     ]   
8. });   
9. Ext.create('Ext.tree.Panel',{   
10.     title: 'Tree test',   
11.     contentEl:'tree-div',   
12.     autoScroll:true,     
13.     minWidth: 135,   
14.     maxWidth: 200,   
15.     store : Ext.create('Ext.data.TreeStore', {   
16.         model: 'ctreemodel',   
17.         root : {   
18.             text: 'Tree Node',   
19.             expanded : true,   
20.             children : [ {   
21.                 text : "detention",   
22.                 aa:'bb',   
23.                 leaf : true  
24.             }, {   
25.                 text : "homework",   
26.                 expanded : true,   
27.                 children : [ {   
28.                     text : "book report",   
29.                     leaf : true  
30.                 }, {   
31.                     text : "alegrbra",   
32.                     leaf : true  
33.                 } ]   
34.             }, {   
35.                 text : "buy lottery tickets",   
36.                 leaf : true  
37.             } ]   
38.         }   
39.     }),   
40.     listeners : {   
41.         'itemclick' : function(view,re){   
42.             alert(re.data.aa);   
43.         }   
44.     }   
45. });  

  Ext.define('ctreemodel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'aa',  type: 'string'},
        {name: 'text',  type: 'string'}
         ....
    ]
});
Ext.create('Ext.tree.Panel',{
    title: 'Tree test',
    contentEl:'tree-div',
    autoScroll:true,  
    minWidth: 135,
    maxWidth: 200,
    store : Ext.create('Ext.data.TreeStore', {
    	model: 'ctreemodel',
		root : {
        	text: 'Tree Node',
			expanded : true,
			children : [ {
				text : "detention",
				aa:'bb',
				leaf : true
			}, {
				text : "homework",
				expanded : true,
				children : [ {
					text : "book report",
					leaf : true
				}, {
					text : "alegrbra",
					leaf : true
				} ]
			}, {
				text : "buy lottery tickets",
				leaf : true
			} ]
		}
    }),
    listeners : {
		'itemclick' : function(view,re){
			alert(re.data.aa);
		}
	}
});

需要自定一个数据模型。TreeStore中有这样一句话
Using Models

If no Model is specified, an implicit model will be created that implements Ext.data.NodeInterface. The standard Tree fields will also be copied onto the Model for maintaining their state.


树节点单击事件更名了“itemclick”，先前我还是用click，怎么老是没反应呢，让我好生郁闷。

Java代码  

1. itemdblclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e)   

itemdblclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e) 

虽然4中的Ext.data.NodeInterface类似以前版本的TreeNode 但是有些属性也被剔除了。
4以前版本的TreeNode 继承Ext.Node ，它是含有attributes属性。 现在没了，都没了。
Node这种描述节点的数据模型与事件方法确实存在冗余。这样看来EXT4，确实瘦身了不少。

Model 的dom结构，类似我们用的jsonstroe的数据存储模型



现在的model范围可以更广，可以定义任意数据结构，管你node还是啥，我都可以接受。

从EXT4整体结构看，用了不少设计模式。