ExtJS Grid - как я могу ссылаться на хранилище по id в моем представлении

Question

Я пытаюсь обратиться к магазину в своем приложении с целью добавления панели инструментов поискового вызова в нижней части моей опоры. В большинстве примеров я изучил хранилище, на которое ссылается переменная, например: store: someStore. Тем не менее, я создаю свое приложение немного по-другому и создал ссылочную переменную в хранилище. У меня пытался назначить идентификатор, но это не сработало.

Вот что у меня есть:

На мой взгляд 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' Я получаю эту ошибку:

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); 
} 

The initComponent вызывается один раз, когда новый экземпляр класса создается см description in the documentation.

...It is intended to be implemented by each subclass of Ext.Component to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to callParent in order to ensure that the parent class' initComponent method is also called...

Вид с функцией 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: {...}, 
    ... 
});