Question

我正在尝试在我的应用中引用一个商店，目的是在我的网格底部添加一个分页工具栏。在大多数示例中，我研究过商店是由变量引用的，例如：store：someStore。但是，通过我构建我的应用程序有点不同，并确实为商店创建了一个引用变量。我有尝试分配一个id，但这不起作用。

这就是我所拥有的：

在我看来Grid.js：

Ext.define('myApp.view.user.Grid', {
    extend: 'Ext.grid.Panel',
    viewModel: {
        type: 'user-grid'
    },
    bind: {
        store: '{users}',
    },
    columns: {...},

    //my paging tool bar
    dockedItems: [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        store: 'girdStore'
        //store: {users} -> did not work
    }],
    ...
});

在我的视图模型GridModel.js中：

Ext.define('myApp.view.user.GridModel', {
    extend: 'Ext.app.ViewModel',

    requires: [
        'myApp.model.User'
    ],

    stores: {
        users: {
            model: 'myApp.model.User',
            storeId: 'gridStore',
            autoLoad: true
        }
    },
    formulas: {...}
});

当我尝试通过id'strestore'引用{users}商店时，我收到此错误：

Uncaught TypeError: Cannot read property 'on' of undefined

如果没有完全重构我的模型，最好的方法是什么？

Answer 1

当您引用网格时，可以通过调用getStore函数来获取商店。请参阅ExtJs 6.2.1 documentation。

var grid; // reference to your grid
var store = grid.getStore();

您可以在initComponent中创建商店，然后将其附加到dockedItems，这样两者都会共享同一商店。

initComponent: function () {
    var store = Ext.create('Ext.data.Store', {
        model: 'myApp.model.User',
        storeId: 'gridStore',
        autoLoad: true
    });
    this.store = store;
    this.dockedItems = [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        store:store
    }];
    this.callParent(arguments);
}

创建类的新实例时会调用initComponent一次，请参阅description in the documentation。

......它的目的是由每个子类实现 Ext.Component提供任何所需的构造函数逻辑。该首先调用正在创建的类的initComponent方法每个initComponent方法的层次结构都是Ext.Component 之后打电话。这使得它易于实施，如果需要，在任何步骤覆盖Component的构造函数逻辑层次结构。 initComponent方法必须包含对callParent的调用为了确保父类的'initComponent方法也是如此称为...

具有initComponent功能的视图。

Ext.define('myApp.view.user.Grid', {
    extend: 'Ext.grid.Panel',
    viewModel: {
        type: 'user-grid'
    },
    initComponent: function () {
        var store = Ext.create('Ext.data.Store', {
            model: 'myApp.model.User',
            storeId: 'gridStore',
            autoLoad: true
        });
        this.store = store;
        this.dockedItems = [{
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            store: store
        }];
        this.callParent(arguments);
    },
    columns: {...},
    ...
});

ExtJS网格 - 如何在视图中按ID引用商店

1 个答案: