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

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

谢谢！

分享到：

2010-12-06 22:03

浏览 5803

评论

1 楼

duyupeng

2014-03-13

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

var root="";

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: '/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 "";

}

这是每次后台返回的数据

{"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，请指教下，谢谢！