ExtJs 中的TreeGrid(Ext.ux.maximgb.tg.EditorGridPanel详解与其他问题解决办法)

                           Ext.ux.maximgb.tg

                                  （ http://www.max-bazhenov.com/dev/ux.maximgb.tg/ ）

  这个包的作用是 对有树型表格的需求有很大的帮助，相信有许多人都有用过，也常常遇到过许多问题，本人在使用时也同样遇到过许多问题，经过痛苦的煎熬后，终于有点小见解，特在此留下纪录，以备在以后的Extjs开发项目中有这方面的需求。

    网上其实这方面的讲解其实很少，不是说很少，而是转载的都是基本是同一篇相关文章，对此我也比较郁闷，不是说不能转载，只是转载的文章如果本来就有问题的话，那可真够郁闷的！本来刚开始摆弄这东西的时候，就是这样，因为网上都是转载http://www.liyonghome.cn/index.php/archives/187.html这个地址的文章，其中不乏有对此方面的讲解，但同样也有错误，本人项目中也用到，借鉴其中却并不能解决问题，网上基本找的资料都是这篇文章的模板，哎，郁闷啊！

   在Ext.ux.maximgb.tg中有可编辑的树形表格可供使用，用到的是

Ext.ux.maximgb.tg.EditorGridPanel

 

   在例子中

var data = [
　　{"_id":1,"_parent":null,"_level":1,"_lft":1,"_rgt":98,"_is_leaf":false,"item":"总成本"},
　　{"_id":2,"_parent":1,"_level":2,"_lft":2,"_rgt":49,"_is_leaf":true,"item":"网络成本"}
];
var record = Ext.data.Record.create([
　　{name: '_id', type: 'int'},
　　{name: '_level', type: 'int'},
　　{name: '_lft', type: 'int'},
　　{name: '_rgt', type: 'int'},
　　{name: '_is_leaf', type: 'bool'},
　　{name: 'item'}
]);
var store = new Ext.ux.maximgb.tg.NestedSetStore({
　　autoLoad : true,
　　reader: new Ext.data.JsonReader({id: '_id'}, record),
　　proxy: new Ext.data.MemoryProxy(data)
});

 

 

  是类似于这样的写法，是因为树形结构使用的是基于左右值的无限分类算法（网友见解）, 但这样的话，计算每个节点的_lft和_rgt相当的麻烦，同时以后如果需要添加的话也是不太可能，因为_lft和_rgt位置不易改变和更改了，因此这种

Ext.ux.maximgb.tg.NestedSetStore

 

 的话，无法灵活使用(它需要配置_lft、_rgt、_id、_parent、_level、_is_leaf)，真正用到的反而是另外一种：

Ext.ux.maximgb.tg.AdjacencyListStore

 

 它所需要的 只要_id、_parent、_is_leaf的配置参数 ，因此他只需要通过_id知道父节点即可定位(_parent),但是要注意此时只需要_id、_parent、_is_leaf这三个参数即可,记住以下一句话：

With AdjacencyListStore you don't need the _level, _lft, and _rgt fields. In fact, having them can mess up the TreeGrid Displ

 

 不要多此一举写多了配置参数，因为写了其他的参数的话，不仅不能正常显示，反而会更糟糕！

本人正因为网上的其他转载文章而误导了，因为其他的文章都不够严谨！不是多了就是少了，例如以下的例子就是错误的 ，请注意：

var data = [
　　{"_id":1,"_parent":null,"_level":1,"_is_leaf":false,"item":"主营业务成本","YN":64.72},
　　{"_id":2,"_parent":1,"_level":2,"_is_leaf":true,"item":"网络维护成本","YN":64.72}
];
var record = Ext.data.Record.create([
　　{name: '_id', type: 'int'},
　　{name: '_level', type: 'int'},
　　{name: '_is_leaf', type: 'bool'},
　　{name: 'item'},
　　{name: 'benbu', type: 'float'}
]);
var store = new Ext.ux.maximgb.tg.AdjacencyListStore({
　　autoLoad : true,
　　reader: new Ext.data.JsonReader({id: ‘_id’}, record),
　　proxy: new Ext.data.MemoryProxy(data)
});

 

   如果你想用Ext.ux.maximgb.tg.AdjacencyListStore这个Store来省略_lft、_rgt的配置的话，那么请你严谨点，他 只要_id、_parent、_is_leaf的配置参数即可，其它的参数多了反而会出错，例如:子节点总是显示在最后，还有错位！

谢谢！

 

评论

1 楼 duyupeng 2014-03-13  

你好，我最近也是在使用这个控件，只是用了_id、_parent、_is_leaf这三个配置参数，但是从后台取回数据后，出现了子节点总是显示在最后的情况，能帮忙看下是哪出问题了么

<script type="text/javascript">
  var root="<%=path%>";
var nodeGrid;
var rootNode;
function to_init(){
    Ext.QuickTips.init();
   // create the data store
       var record = Ext.data.Record.create([
        {name: 'nodecode'},
        {name: 'nodename'},
        {name: 'nodetype'},
        {name: 'islocal'},
        {name: 'domainid'},
        {name: 'subdomainid'},
        {name: 'propagationtype'},
        {name: 'epgdeployed'},
        {name: 'resourceDeployType'},
        {name: '_id', type: 'int'},
       {name: '_parent', type: 'auto'},
       {name: '_is_leaf', type: 'bool'}
      ]);
  
  
   var store = new Ext.ux.maximgb.treegrid.AdjacencyListStore({
     autoLoad : true,
     url: '<%=path%>/shinenode.do?type=queryShinenode',
reader: new Ext.data.JsonReader(
{
id: '_id',
root: 'data',
totalProperty: 'total',
successProperty: 'success'
},
record
)
     });
  
    var treeGrid = new Ext.ux.maximgb.treegrid.GridPanel({
        store: store,
        master_column_id : 'nodename',
        columns: [
  {id:'nodename',header: "区域", dataIndex:'nodename', width: 160, sortable: true},
  {header: "节点代码", dataIndex:'nodecode', width: 80, sortable: true}
  //{header: "节点名称", dataIndex:'nodename', width: 80, sortable: true},
  //{header: "节点类型", dataIndex:'nodetype', width: 80, sortable: true},
  //{header: "本地部署", dataIndex:'_parent', width: 70, sortable: true},
  //{header: "子域", dataIndex:'_is_leaf', width: 60, sortable: true},
  //{header: "EPG部署", dataIndex:'epgdeployed', width: 70, sortable: true},
          //{header: "部署网元", dataIndex:'_id', width: 80, sortable: true, renderer: showDeployNeUrl},
          //{header: "配置服务", dataIndex:"_id", width: 80, sortable: true, renderer: showDeployNeServiceUrl},
          //{header: "配置IP地址段", dataIndex:"_id", width: 100, sortable: true, renderer: showDeployIPUrl},
         // {header: "编辑", dataIndex:"_id", width: 50, sortable: true, renderer: showEditUrl},
         // {header: "删除", dataIndex:"_id", whidth: 50, sortable: true, renderer: showDeleteUrl}
        ],
        stripeRows: true,
        autoExpandColumn: 'nodename',
        title: '节点管理',
        root_title: 'Globle'
      });
   
var viewport = new Ext.Viewport({
    layout: 'fit',
    autoScroll: true,
containerScroll: true,
    items: treeGrid
    });
treeGrid.getSelectionModel().selectFirstRow();

}

function showDeployNeUrl(value){
return "";
}

function showDeployNeServiceUrl(value){
return "";
}

function showDeployIPUrl(value){
return "";
}

function showEditUrl(value){
return "";
}

function showDeleteUrl(value){
return "";
}

</script>


这是每次后台返回的数据
{"data":[{"_id":1,"_is_leaf":false,"company":"ShineTV_sd"}],"success":true,"total":1}

{"data":[{"_id":46,"_is_leaf":true,"_parent":1,"company":"ShineTV_jnnode"},{"_id":123,"_is_leaf":true,"_parent":1,"company":"ShineTV_YangXin"},{"_id":4,"_is_leaf":false,"_parent":1,"company":"ShineTV_qd"},{"_id":108,"_is_leaf":true,"_parent":1,"company":"ShineTV_ShineTV_yt"}],"success":true,"total":4}

{"data":[{"_id":33,"_is_leaf":false,"_parent":4,"company":"ShineTV_cy"},{"_id":30,"_is_leaf":true,"_parent":4,"company":"ShineTV_EPG42"},{"_id":37,"_is_leaf":true,"_parent":4,"company":"ShineTV_10"}],"success":true,"total":3}

刚开始学习EXT，请指教下，谢谢！