通过读取json串来实现ext树

      一般情况下，都是从数据库中获取树的节点。此种情况下可能数据是经常需要维护的，增删改查。如短信目录，物品管理之类的情况，但是也有一些情况是一些固定数据，所以就不用去实现一个动态的异步树。

      下面写个简单的列子：

            var json =[{'text':'A,'id':'11','leaf':false,
                 'children':[{'text':'A1,'id':'1','leaf':true},
                           {'text':'A2','id':'2','leaf':true}]},
           {'text':'B,'id':'22','leaf':false,
                 'children':[{'text':'B1,'id':'3','leaf':true},
                           {'text':'B2,'id':'4','leaf':true},
                           {'text':'B3,'id':'5','leaf':true},
                           {'text':'B4,'id':'6','leaf':true}]}];  需求者可以相应实现自己需要实现的树状结构的节点数据。

 

树面板对象

xinli.ui.HistoryTreePanel= Ext.extend(Ext.tree.TreePanel, {
 prodInstId : null,
 initComponent : function() {
  var prodInstId = this.prodInstId;
  Ext.apply(this, {
     region : 'west',
     width : 200,
     minSize : 200,
     maxSize : 250,
     border : true,
     frame : false,
     rootVisible : true,
     autoScroll : true,
     autoHeight : false,// 自动高
     containerScroll : true,
     split : true,
     root : new Ext.tree.AsyncTreeNode({
          id : '1',
          text : '根目录,
          expanded : true,
          children : json
         }),
        loader : new Ext.tree.TreeLoader(
        )
    });

  xinli.ui.HistoryTreePanel.superclass.initComponent.call(this);

  this.addListener('click', function(node) {

             do something........代码略

    }, this);
 }
});

     通过上面的代码，我们可以实现一个树。节点数据通过读取固定配置好的json串来实现一个树面板对象。