extjs-应用程序启动时不应加载自动加载为true的存储

我用

自动加载：true

将一个网格链接到一个商店。问题是，应用程序启动时会加载存储，即使视图是在稍后通过菜单访问时创建的

我已经在Application.js和视图中引用了存储，但是我没有显式地安装存储和视图

我不知道如何实现仅在视图需要时加载存储

• 如果我设置了

  autoLoad:true

  ，应用程序启动时就会加载存储
• 如果我设置了

  autoLoad:false

  ，则存储根本不会加载

我知道这是很基本的，但我已经被困在这里了

---

以下是所有相关代码供参考：
app/store/owner.js

Ext.define('Mb.store.Owners', {
    extend: 'Ext.data.Store',
    model: 'Mb.model.Owner',
    autoLoad: true,
    proxy: {
        ...
});

Ext.define('Mb.view.winbiz.Owners', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.test-gridPanel',
    store: 'winbiz.Owners',
    columns: [{
    ...

Application.js

Ext.define('Mb.Application', {
    name: 'Mb',
    extend: 'Ext.app.Application',
    models: [
        'Owner'
    ],
    stores: [
        'Owners'
    ],
    ...

app/view/owner.js

Ext.define('Mb.store.Owners', {
    extend: 'Ext.data.Store',
    model: 'Mb.model.Owner',
    autoLoad: true,
    proxy: {
        ...
});

Ext.define('Mb.view.winbiz.Owners', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.test-gridPanel',
    store: 'winbiz.Owners',
    columns: [{
    ...

视图在控制器中实例化：

Ext.define('Mb.controller.Winbiz', {
    extend: 'Ext.app.Controller',
    views: [
        'Owners'
    ],
    init: function(){
        this.control({
            'menu #test': {click: this.onMenuTest},
        })
    },
    onMenuTest: function(){
        this.getController('Main').addToMainTab('test-gridPanel');
    },

---

您可以添加

render

处理程序以查看调用store

load

方法并禁用

autoLoad

的处理程序

示例侦听器：

Ext.define('Mb.view.winbiz.Owners', {
    extend: 'Ext.grid.Panel',
    [...],

    initComponent: function(){
        this.callParent();
        this.on('render', this.loadStore, this);
    },

    loadStore: function() {
        this.getStore().load();
    }
});

---

我会让视图的控制器处理存储负载

从禁用商店上的自动加载开始

Ext.define('Mb.controller.Winbiz', {
    extend: 'Ext.app.Controller',
    views: [
        'Owners'
    ],
    ownerStore: null,
    init: function(){
        this.control({
            'menu #test': {click: this.onMenuTest},
        });

        this.ownerStore = Ext.getStore('winbiz.Owners');
    },
    onMenuTest: function() {
        if (this.ownerStore.loaded === false) {
            this.ownerStore.load(
                scope: this,
                callback: this.onOwnerStoreLoaded
            );
        }
        else {
            this.addToTab();
        }            
    },
    onOwnerStoreLoaded: function (store, records, successful, eOpts) {
        if (successful) {
            store.loaded = true;
            this.addToTab();
        }
    },
    addToTab: function () {
        this.getController('Main').addToMainTab('test-gridPanel');
    }

---

在加载存储之前还是之后，您想更改视图是另一个问题。

这是我的最终控制器代码：

Ext.define('Mb.controller.Winbiz', {
    extend: 'Ext.app.Controller',
    views: [
        'Owners'
    ],
    refs: [{ref: 'testGrid', selector: 'test-gridPanel'}],
    init: function(){
        this.listen({
            store: {
                '#Owners':{ load: this.onOwnersLoad}
            }
        })
        this.control({
            'menu #test': {click: this.onMenuTest},
            'test-gridPanel': {render: this.onOwnersRender}
        })
    },
    onMenuTest: function(){
        this.getController('Main').addToMainTab('test-gridPanel');
    },
    onOwnersLoad: function(store){
        store.loaded = true
    },
    onOwnersRender: function(){
        var store = this.getTestGrid().getStore();
        if(!store.loaded)store.load();
    },

---

它按照@pcguru的建议将所有代码放入控制器，并使用render事件按照@Lolo的建议缩短代码。谢谢

谢谢，这是完美的解决方案。我不喜欢视图中的代码。如果视图中有应由控制器负责的代码，则没有理由使用控制器。此解决方案还将在视图的每个渲染上重新加载存储-可能是不必要的？您是对的，代码应该进入控制器，而不应该重新加载存储。你的代码有点长。我会尽量缩短它。

.loaded

未在您的代码中设置，它将始终加载存储。@pcguru您是对的。这意味着除非将其存储在存储加载时的变量中，否则无法知道存储是否已加载？@pcguru我更新了代码以更正此问题。现在它并不比你的短：（：）但是如果长代码工作正确，并且更可重用和高效，尤其是如果它比短代码更容易阅读和理解，那么长代码会更好，imo。有人可能会认为加载应该是一个内置功能。但是可以很容易地为Ext.data.Store创建覆盖-因此您不必对每个存储重复此操作-如果这样做，您可以从此控制器中删除加载的零件。