1

我试图在我的应用程序中引用一个商店，以便在我的网格底部添加一个分页工具栏。在我研究过的大多数示例中，商店是由变量引用的，例如：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 'gridStore' 引用 {users} 存储时，我收到此错误：

Uncaught TypeError: Cannot read property 'on' of undefined

在不完全重构我的模型的情况下，最好的方法是什么？

4

1 回答 1

0

当您有对网格的引用时，您可以通过调用该getStore函数来获取商店。请参阅ExtJs 6.2.1 文档。

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新实例时调用一次，请参阅文档中的描述。

...它旨在由 Ext.Component 的每个子类实现，以提供任何需要的构造函数逻辑。首先调用正在创建的类的 initComponent 方法，然后调用层次结构中到 Ext.Component 的每个 initComponent 方法。这使其易于实现，并且如果需要，可以在层次结构中的任何步骤覆盖组件的构造函数逻辑。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: {...},
    ...
});
于 2017-02-08T15:18:53.513 回答