1

我有一个返回一系列事物的服务。一个事物只有一个id和一个name

我想将这些加载到Ext.tree.Panel. 目前,我已经定义了一个模拟来自服务的典型响应的数据存储。你可以在这里玩一个演示 JSFiddle 。

代码也包括在下面:

Ext.define('Thing', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name'],
});

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Thing',

    // example service response (in reality, this would be JSON)
    root: {
        children: [
            {
                id: 1,
                name: 'Thing 1',
            },
            {
                id: 2,
                name: 'Thing 2',
            },
            {
                id: 3,
                name: 'Thing 3',
            },
        ],
    },

    listeners: {
        append: function(thisNode, newChildNode, index, eOpts) {
            if( !newChildNode.isRoot() ) {
                newChildNode.set('text', newChildNode.get('name'));
            }
        },
    },
});

Ext.create('Ext.tree.Panel', {
    renderTo: Ext.getBody(),
    store: store,
    rootVisible: false,
});

如您所见,该服务仅返回 Thing 的idand ,没有像or之类的name树节点信息,这是 an通常所期望的。childrenleafExt.data.TreeStore

我根本无法更改服务作为响应返回的内容。我喜欢我可以调用该服务并获得一个平面的事物数组,而无需额外的树节点信息。有许多与该服务通信的应用程序根本不需要此类数据,而且我无权更改它。

不幸的是,如果没有children为响应中的每个事物定义元素,当我尝试扩展节点时,Ext 会引发以下错误(您可以在 JSFiddle 中自己生成):

Uncaught TypeError: Cannot call method 'indexOf' of undefined 

所以,我的问题是:我怎样才能避免在我的回复中发回children(或leaf)并解决这个错误?我只是想让我的东西被加载到树中并且可以扩展(是的,它们不能是叶子)。

4

2 回答 2

0

自己添加这些信息!

小例子(您可以轻松地从浏览器的控制台中尝试):

a = {b:23};
a.c = 25;
//a is now the same like {b:23, c:25}

在商店的 afterRequest 方法中,您可以例如执行以下操作:

proxy: {
    type: 'ajax',

    url: 'xxx',

    listeners: {
        exception: function(proxy, response, options) {
            //error case
        }
    },

    afterRequest: function(request, success) {
        var resText = request.operation.response.responseText,
            allThings = Ext.decode(resText),  //Decodes (parses) a JSON string to an object
            things = allThins.children,       //Now we have an object an we can do what we want...
            length = things.length;

        for (var i = 0; i < length; i++) {
            things[i].leaf = true;
            things[i].expanded = true;
        }

        this.setRootNode(allThings); 
    }
}

这只是一些伪代码,但它应该可以工作!设置一个调试器语句( Link ),看看你真正得到了什么!

我希望这有帮助!

于 2013-01-22T14:45:18.987 回答
0

您可以尝试迭代您的响应存储并创建子节点。然后将您的孩子附加到您的根节点

store.each(function(rec) {  
  var childNode ;  
  //Create a new object and set it as a leaf node (leaf: true)  
  childNode = Ext.create('Model_Name', {  
       id: rec.data.id,  
       name: rec.data.name,
       text : rec.data.name,  
       leaf : true,  
  });  
  // add/append this object to your root node  
  treepanel.getRootNode().appendChild(childNode );  
 }); 

检查此链接以获取更多详细信息

于 2013-06-17T18:17:54.510 回答