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的配置参数即可，其它的参数多了反而会出错，例如:子节点总是显示在最后，还有错位！

谢谢！