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

时间:2017-02-08 15:14:02

标签: javascript extjs pagingtoolbar

我正在尝试在我的应用中引用一个商店,目的是在我的网格底部添加一个分页工具栏。在大多数示例中,我研究过商店是由变量引用的,例如: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

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

1 个答案:

答案 0 :(得分:0)

当您引用网格时,可以通过调用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: {...},
    ...
});