手动/动态地将数据加载到树形面板中？

Posted 2023-02-26

【中文标题】手动/动态地将数据加载到树形面板中？

【英文标题】：Manually/dynamically load data into a treepanel?

【发布时间】：2013-03-08 22:08:31

【问题描述】：

在 ExtJs3 中，我的团队执行以下操作将数据加载到树存储中。 在 ExtJS4 中执行此操作的等效方法是什么？当我使用 NodeInterface 执行类似代码时，出现“无法读取 null 的属性 '0'”错误。

Ext.Ajax.request(
            url: servlet,
            success: function(response, opts)
            
                var jsonData = Ext.decode(response.responseText);

                var root = new Ext.tree.AsyncTreeNode(
                    text: 'Root test',
                    draggable: false,
                    id: 'root',
                    children: jsonData.tree.data
                );
                tree.setRootNode(root);
//...

更新：我真的不在乎如何完成这项工作。我只有两个要求：（1）使用单个服务器请求来获取不相关数据。 (2) 对不同的数据复用树形面板和网格面板

我已经能够将数据加载到动态创建的树形面板中。但是，使用 setRootNode() 不适用于现有的树形面板。

//this works
var tree = Ext.create('Ext.tree.Panel', 
          root: 
                text:'Application',
                expanded:true,
                children: jsonResponse.categoryTree.data
          
        );

//this doesn't work
existingTree.setRootNode(root);

【问题讨论】：

坦率地说，在 extjs4 中这看起来完全不同。我只是不确定你需要多少坚持上面的代码。但简而言之：NodeInterface 用于装饰属于TreeStore 的模型实例。一般来说，你永远不应该使用这个类。有没有办法只将代码迁移到正确的 extjs4 样式？

@lzhaki 查看我的更新

【参考方案1】：

到目前为止，“足够好”的解决方案是

把树面板变成一个类

每次数据变化时：

删除树面板的前一个实例（如果有） 实例化一个新的树面板

不是“Ext JS 4”的方式，但它可以完成工作。除非有人能用正确的做事方式启发我，否则我将其标记为答案。

                var panel = Ext.ComponentQuery.query('panel#categorysearch')[0];

                //destroy the tree panel
                panel.remove('categorysearchtree', true);

                //create a new one
                var tree = Ext.create('MyApp.view.CategorySearchTreePanel', 
                    root: 
                        text:'Services', 
                        expanded:true,
                        children: jsonResponse.categoryTree.data
                    
                );

                panel.add(tree);