Extjs 4.2.1 - 配置 autoLoad:false 失败答案

【问题标题】：Extjs 4.2.1 - config autoLoad:false FailsExtjs 4.2.1 - 配置 autoLoad:false 失败
【发布时间】：2013-10-11 07:38:35
【问题描述】：

我定义了一个 treepanel 扩展 extend: 'Ext.tree.Panel' 并具有类似的 initComponent 函数

 Ext.define('Example', {
    extend: 'Ext.tree.Panel',
    title: 'Example',
    useArrows:false, 
    rootVisible: false,
    border: false,
    initComponent: function () {
        var store = Ext.create('Ext.data.TreeStore', {
            fields: [
                {name: 'id',     type: 'string'},
                {name: 'text',     type: 'string'}
            ],
            autoLoad : false, // not working
            proxy: {
                type: 'ajax',
                url: 'data.php',
                reader: {
                    type: 'json',
                    root: 'results'     
                }
            }

        });
        this.store = store;
        this.callParent(arguments);
    }
 });

我尝试设置autoLoad: false，但是当我创建treepanel时总是加载

当我尝试配置下面的代码来存储然后autoLoad: false 工作但我的treepanel 加载后是空白的

                root: {
                    text: 'Ext JS',
                    id: 'src',
                    expanded: false // this 
                }

如果不使用 root 配置，我的 json 很好并且可以工作

({  "results": [
    { 
        id : '1' , 
        text : '1', 
        expanded: true, 
        results :[{ 
            id : '2' , 
            text : '2', 
            leaf:true
        }]
    },{ 
        id : '3' , 
        text : '3', 
        leaf:true
    }] 
})

如何解决这个问题。

【问题讨论】：

autoLoad 属性只绑定到存储本身。我猜你的情况是一个组件触发了负载。如果您想要完全控制，您可以使用 beforeload 事件检查每个负载，如果不是 valid，则返回 false
@sra 如何检查是否不是valid，你是什么意思？但是为什么我的代码失败了，autoLoad : false 不工作:(
请参考autoLoad 的文档请注意，如果true，商店将在创建后加载。只创建没有树形面板的商店，您会看到商店在创建后没有加载。
@sra 如果使用beforeload，我认为这很难理解。我在store 中使用root: { results: [] } 然后autoLoad: false 工作但是当我load() 我的treepanel 是空白的？

标签： extjs extjs4 extjs4.2

【解决方案1】：

您必须覆盖 Ext.tree.Panel.setRootNode 方法以将商店的 autoLoad 属性考虑在内。

以下示例使用 ExtJS v4.2.2 测试。

Ext.define('Example', {
    extend: 'Ext.tree.Panel',
    title: 'Example',
    useArrows:false,
    rootVisible: false,
    border: false,

    /**
     * Override.
     */
    setRootNode: function() {
        if (this.getStore().autoLoad) {
            this.callParent(arguments);
        }
    },

    initComponent: function () {
        var store = Ext.create('Ext.data.TreeStore', {
            fields: [
                {name: 'id',     type: 'string'},
                {name: 'text',     type: 'string'}
            ],
            autoLoad : false,
            proxy: {
                type: 'ajax',
                url: '/data.php',
                reader: {
                    type: 'json',
                    root: 'results'
                }
            }

        });
        this.store = store;
        this.callParent(arguments);
    }
});

Ext.onReady(function(){

    var tree = Ext.create('Example', {
        renderTo: Ext.getBody(),
        width: 300,
        height: 300
    });

    tree.getStore().load();
});

【讨论】：

这是 4.2.2 中的错误吗？对我来说，这在 4.1.1 中没有发生
@HDave 似乎如此。对表格和树的视图进行了轻微重构。

【解决方案2】：

我不知道为什么“autoLoad: false;”不起作用。但是您可以通过在树形面板中添加“root”配置来阻止自动加载。不在树店里。并且 load() 也可以正常工作。

{
    xtype: 'treepanel',

    .....

    root: {
        loaded: true;
    }
}

这会起作用。

var myTreeStore = Ext.create('Ext.data.TreeStore', {
    fields: [ ... ],

    proxy: { ... },

    root: {
        loaded: true;
    }
});

这行不通。

祝你好运。

【讨论】：

是的，这行得通。海事组织这是一个奇怪的副作用或错误？最后，我将相同的数据发送到商店。在 Extjs 5.1.0 中对此进行了测试。

【解决方案3】：

老实说，您可能只是在寻找 queryMode: 'local'，我不是 100% 它适用于此，但我会这样做..

我一直在组合框上使用它，它强制本地存储管理（关闭自动加载）

【讨论】：