使用ExtJS4为TreePanel创建TreeStore

时间:2014-03-28 22:35:01

标签: javascript tree extjs4.2

我在尝试创建TreeGrid时遇到问题,我收到一个复杂的JSON,我需要通过使用"来提取数据来处理##;和条件因为我必须形成树的组件数组。

这是当前使用swing的Java UI工作的组件:

enter image description here

在ExtJS中,我期待这样的事情:

enter image description here

这是为了获得EXTJS TreeGrid的结构而形成的数组示例:

enter image description here

我在JSFiddle上创建了一个更简单的结构:

var statuses = [];
var dispatchesA = [];
var dispatchesB = [];
var rootFolders = [];
var s1 = {name: 'Sent', id: '1'};
var s2 = {name: 'Complete', id: '2'};
var s3 = {name: 'Pending', id: '3'};
var s4 = {name: 'Process', id: '4'};
statuses.push(s1);              
statuses.push(s2);
statuses.push(s3);
statuses.push(s4);

var dispatch1 = {afterhours: true, dispatchId: '001', 
                     status: 'Complete', statList: statuses};
var dispatch2 = {afterhours: true, dispatchId: '002', 
                     status: 'Complete', statList: statuses}; 

var dispatch3 = {afterhours: false, dispatchId: '001', 
                     status: 'Complete', statList: statuses};

dispatchesA.push(dispatch1);
dispatchesA.push(dispatch2);    
dispatchesB.push(dispatch3);

var rootElement1 = {nodeDisplay: 'WKGROUP1', children: dispatchesA};
var rootElement2 = {nodeDisplay: 'WKGROUP2', children: dispatchesB};
rootFolders.push(rootElement1);
rootFolders.push(rootElement2);

我想基于类似的结构创建一个TreeStore,到目前为止,这是我的ExtJS端代码:

createTreeStore: function(target) {
        var me = this;
        return Ext.create('Ext.data.TreeStore', {            
            autoLoad: false,
            clearOnLoad: false,
            root: {
                expanded: true,
                children: rootFolders
            }
        });
    },

我想知道如何实现我的方法,但根本没有工作,因为TreeGrid显示但不是数据。

任何帮助将不胜感激。提前谢谢。

问候。

1 个答案:

答案 0 :(得分:0)

我必须以传统的方式解决这个问题。我通过检索基本json对象并迭代数据来创建我自己的树存储将使用的自定义对象来解决问题。它按预期工作。迭代对象有点乏味,但是,当然,对于我的工作的业务需求是必要的,没有别的办法。

如果有人遇到同样的问题并且需要树的特定结构并且从服务器传入的json数据不适应,我强烈建议迭代json对象并检索所需的数据以创建自定义对象使用并插入商店。

问候。