Question

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

我想将它们加载到Ext.tree.Panel。目前，我已经定义了一个模拟服务典型响应的数据存储。您可以使用演示JSFiddle here。

以下代码也包括在内：

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的id和name，没有children或leaf等树节点信息，这是{{1}通常期望。

我根本无法更改服务作为响应返回的内容。我喜欢我可以调用服务并获得一个平面的数组，没有多余的树节点信息。有很多应用程序正在与这项服务进行交谈，根本不需要这些数据，而且我没有得到权力的许可 - 即可以更改它。

不幸的是，如果没有为响应中的每个Thing定义Ext.data.TreeStore元素，当我尝试扩展节点时，Ext会引发以下错误（您可以在JSFiddle中自己生成）：

children

所以，我的问题是：如何避免在我的回复中发回Uncaught TypeError: Cannot call method 'indexOf' of undefined（或children）并解决此错误？我只是喜欢将我的东西加载到树中并且可以扩展（是的，它们不能是叶子）。

Answer 1

自己添加这些信息！

小例子（您可以从浏览器轻松地在控制台中尝试）：

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），看看你真正得到了什么！

我希望这有帮助！

Answer 2

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

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 );  
 });

查看this link了解详情

如何填充没有子或叶信息的Ext.data.TreeStore？

2 个答案: