EXTJS4 之 TreePanel

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

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

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

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

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


用例子说明：
EXT3
Java代码  
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);   
        }   
    }   
});  

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代码  
click : ( Node node, Ext.EventObject e )   

  click : ( Node node, Ext.EventObject e )

Node的dom结构：

EXT4 需要这样来：
Java代码  
  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);   
        }   
    }   
});  

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

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

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

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


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

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

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

比如：
Java代码  
var treeNodeClick = function(view,record){   
        var childN = {   
                text:'test11',   
                leaf:true  
        }   
        record.appendChild(childN);   
}  

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

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

走失的猫咪 发表于 2011-6-21 13:32
弱弱的问一下，tree中的children在API中查不到，那么它的属性我该怎么找呢？

children是一个node的数组,你查node就好了

自然法则.强者生存

努力学习  天天向上