Javascript ExtJS网格-如何在视图中按id引用存储

我试图在我的应用程序中引用一个商店，以便在我的网格底部添加一个分页工具栏。在我研究过的大多数示例中，存储是由变量引用的，例如：store:someStore。然而，到目前为止，我已经构建了一个稍微不同的应用程序，并为应用商店创建了一个引用变量。我有 尝试分配id，但无效

以下是我所拥有的：

在my view 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

---

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

当您有对网格的引用时，您可以通过调用

getStore

函数来获取存储。看

---

您可以在

initComponent

中创建存储，然后将其附加到

dockditems

，以便两者共享同一存储

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.组件提供任何所需的构造函数逻辑。这个 首先调用正在创建的类的initComponent方法，使用 层次结构上的每个initComponent方法都指向正在使用的Ext.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: {...},
    ...
});

---

当您有对网格的引用时，可以通过调用

getStore

函数来获取存储。看

---

您可以在

initComponent

中创建存储，然后将其附加到

dockditems

，以便两者共享同一存储

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.组件提供任何所需的构造函数逻辑。这个 首先调用正在创建的类的initComponent方法，使用 层次结构上的每个initComponent方法都指向正在使用的Ext.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: {...},
    ...
});

---

是的，我在我的控制器中这样做是为了将商店连接到我的视图，但我不确定这如何帮助我在dockedItems中引用它。添加bind:store:{users}}删除了错误，但在我通过addRecord方法添加记录时，它不会显示任何数据。好的，对于这个愚蠢的问题（我对EXTjs非常陌生），我深表歉意，但是这个initComp方法会去哪里呢？作为Ext.define（'myApp.view.user.Grid'，{}）类的一个方法，我明白了，但这与简单地将bind:store:{users}}添加到dockedItems[{…}]具有相同的效果，它删除了TypeError，但我的分页工具栏不显示记录或页面的数量。此问题可能与正确引用存储无关…您可以创建一个解决此问题的工具吗？不要忘记在您的存储中配置pageSize:25和autoLoad:{start:0，limit:25}，（25是一个示例）是的，我在控制器中这样做是为了将存储连接到我的视图，但我不确定这对我在dockedItems中引用它有什么帮助。添加bind:store:{users}}删除了错误，但在我通过addRecord方法添加记录时，它不会显示任何数据。好的，对于这个愚蠢的问题（我对EXTjs非常陌生），我深表歉意，但是这个initComp方法会去哪里呢？作为Ext.define（'myApp.view.user.Grid'，{}）类的一个方法，我明白了，但这与简单地将bind:store:{users}}添加到dockedItems[{…}]具有相同的效果，它删除了TypeError，但我的分页工具栏不显示记录或页面的数量。此问题可能与正确引用存储无关…您可以创建一个解决此问题的工具吗？不要忘记在您的存储中配置的pageSize:25和autoLoad:{start:0，limit:25}，（25是一个示例）