EXTJS4 之 TreePanel

EXT4出了有好一会了，最近想用它下。
大致扫了下结构，发现变化很大。有点震惊，与4版本之前的变化非常大。
就行FLEX3与FLEX4变化，FLEX4引入全新机制。

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

EXT4出了有好一会了，最近想用它下。
大致扫了下结构，发现变化很大。有点震惊，与4版本之前的变化非常大。
就行FLEX3与FLEX4变化，FLEX引入全新机制。

同样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

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的值。因为它的存储结构变了。
事件：

  click : ( Node node, Ext.EventObject e ) 

Node的dom结构：

EXT4 需要这样来：

  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，怎么老是没反应呢，让我好生郁闷。

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整体结构看，用了不少设计模式。

以上仅是个人理解，不够深入，也许有误差。

有用。想问一句。
既然Ext.4.0 用法改成遮掩了。
那Node貌似木有什么用处了。楼主有研究吗。
在给一个ROOT添加一个子节点的时候该怎么做呢。
之前直接用appendchild 现在貌似不能这样用了。

Node并发没有用处在4中，变成了接口，归纳到data包下 Ext.data.NodeInterface

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

tree node 的单击事件，看到 Ext.data.Model record 在这里你可以理解为NodeInterface的实现，所以可以用model直接appednChild

比如：

var treeNodeClick = function(view,record){
		var childN = {
				text:'test11',
				leaf:true
		}
		record.appendChild(childN);
}

弱弱的问一下，tree中的children在API中查不到，那么它的属性我该怎么找呢？

不通过后台返回的结点包含checked属性这种方式，Ext4.0怎么实现check tree？

蛮有用的，的确变化太大了，用Ext.getCmp都获取不到treeNode的实例了。

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

在这个事件里如何获取当前点击的节点的父节点呢？

找了很多文档，都没找到啊

楼主
怎么看的dom结构可以告知一下吗

个人感觉设计过度了


不知道extjs 3有没有社区支持在做了

我也想问：那个用的是什么工具？