extjs 4.1 treestore 延迟加载：q 是，它分支吗？

Posted 2023-02-26

【中文标题】extjs 4.1 treestore 延迟加载：q 是，它分支吗？

【英文标题】：extjs 4.1 treestore lazy loading: The q is, does it branch?

【发布时间】：2012-08-10 12:24:12

【问题描述】：

我想使用 extjs4.1 在 MVC 应用程序中实现树分支的延迟加载，其中分支位于不同的 url。我已经走了很多路，碰到了很多墙，现在它没有分支。

这是我失败的地方：

Ext.define('OI.view.tree.Tree' ,
    extend: 'Ext.tree.Panel',
    alias : 'widget.treepanel',
    store: 'TreeStore',
    collapsible: true,
    rootVisible: false,

    viewConfig: 
        plugins: [
            ptype: 'treeviewdragdrop'
        ]
    ,
    height: 350,
    width: 400,
    title: 'Directory Listing',

    initComponent: function() 
        this.store = Ext.data.StoreManager.lookup(this.store);
        this.store.getProxy().url = 'data/level1.json'; // <-- init loading
        this.store.load();
        this.callParent(arguments);
    ,

    listeners: 
        itemclick: function(view, record) 

            console.info('ID: '+record.get('id'));
            console.info('TEXT: '+record.get('text'));
            console.info('PrimType: '+record.get('primaryType'));
            console.info(record.fields.getCount());
            console.info('JCRPATH: '+record.get('jcrPath'));

            var newBranchStore = Ext.create('Ext.data.TreeStore', 
                model: 'OI.model.Branch',
                autoLoad: true,
                proxy: 
                    type: 'ajax',
                    reader: 
                        url: 'data/'+ record.get('jcrPath') +'/level1.json', //<-- load json at the level of the url path returned by the model
                        type: 'json'
                    
                ,  
                folderSort: false
            );

            newBranchStore.load(url: 'data/'+ record.get('jcrPath') +'/level1.json',
                callback: function()
                    console.log('loaded');
                    var mynode = newBranchStore.getNodeById('content_mytest');
                    console.info(mynode.get('id'));
                    this.store.getNodeById(record.get('id')).appendChild(mynode).expand(); // <-- this does not work
                ,
                scope: this
            );
        
    
);

第一层加载正确，但是当我点击节点时，我得到了从服务器返回的正确 json，在这种情况下是一个用于调试的静态 json 文件，我尝试静态获取一个节点并将其附加到已单击的那个。但它永远不会被注入。

我最终想要实现的是，我可以将 json 文件返回的所有子节点附加到已单击的节点。

此外，我对树店有点困惑...... 当我说每棵树只能有一个树库时，我是否正确，对吗？所以我需要将新节点附加到原始树存储...我有点困惑，可能需要我能得到的所有指针。

【参考方案1】：

您过于复杂了，请改用这种方法（基本上只是在加载到正确的 url 之前换掉商店的 url）：

Ext.define('OI.view.tree.Tree' ,
    extend: 'Ext.tree.Panel',
    alias : 'widget.treepanel',
    store: 'TreeStore',
    collapsible: true,
    rootVisible: false,

    viewConfig: 
        plugins: [
            ptype: 'treeviewdragdrop'
        ]
    ,
    height: 350,
    width: 400,
    title: 'Directory Listing',

    initComponent: function() 
        this.store = Ext.data.StoreManager.lookup(this.store);
        this.store.getProxy().url = 'data/level1.json'; // <-- init loading
        this.store.load();
        this.callParent(arguments);
    ,

    listeners: 

        beforeload: function(store, operation) 
            store.getProxy().url = 'data/'+ operation.node.get('jcrPath') +'/level1.json';
        
    
);

【讨论】：

非常感谢...您需要将其更改为 beforeload: function(store, operation) 以使其正常工作...