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

Posted 2023-02-26

【中文标题】如何填充没有子节点或叶子信息的 Ext.data.TreeStore？

【英文标题】：How to populate an Ext.data.TreeStore without children or leaf information?

【发布时间】：2013-01-22 13:41:03

【问题描述】：

我有一个服务，它返回一个事物数组。一个事物只有一个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,
);

如您所见，该服务仅返回事物的id 和name，没有像children 或leaf 这样的树节点信息，这是Ext.data.TreeStore 通常所期望的。

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

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

Uncaught TypeError: Cannot call method 'indexOf' of undefined 

所以，我的问题是：如何避免在回复中发回children（或leaf）并解决此错误？我只是想让我的东西被加载到树中并且可以扩展（是的，它们不能是叶子）。

【参考方案1】：

自己添加这些信息！

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

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

在 store 的 afterRequest-method 中，您可以执行以下操作：

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

我希望这会有所帮助！

【参考方案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了解更多详情