extjs - Магазин с автозагрузкой true не должен загружаться при запуске приложения
У меня есть сетка, связанная с магазином autoLoad: true
, Проблема в том, что хранилище загружается при запуске приложения, даже если представление создается только позже при доступе через меню.
Я ссылался на хранилище в Application.js и в представлении, но я явно не заявляю ни о хранилище, ни о представлении.
Я не знаю, как добиться, чтобы магазин загружался только тогда, когда это необходимо представлению.
- Если я установлю
autoLoad: true
, магазин загружается при запуске приложения. - Если я установлю
autoLoad: false
, магазин не загружается вообще.
Я знаю, что это довольно просто, но я застрял до сих пор.
Вот весь соответствующий код для справки:
приложение / магазин /Owners.js
Ext.define('Mb.store.Owners', {
extend: 'Ext.data.Store',
model: 'Mb.model.Owner',
autoLoad: true,
proxy: {
...
});
application.js
Ext.define('Mb.Application', {
name: 'Mb',
extend: 'Ext.app.Application',
models: [
'Owner'
],
stores: [
'Owners'
],
...
приложение / просмотр /Owners.js
Ext.define('Mb.view.winbiz.Owners', {
extend: 'Ext.grid.Panel',
alias: 'widget.test-gridPanel',
store: 'winbiz.Owners',
columns: [{
...
Представление создается в контроллере:
Ext.define('Mb.controller.Winbiz', {
extend: 'Ext.app.Controller',
views: [
'Owners'
],
init: function(){
this.control({
'menu #test': {click: this.onMenuTest},
})
},
onMenuTest: function(){
this.getController('Main').addToMainTab('test-gridPanel');
},
3 ответа
Можете добавить render
обработчик для просмотра, который будет вызывать магазин load
метод и отключить autoLoad
,
Пример слушателя:
Ext.define('Mb.view.winbiz.Owners', {
extend: 'Ext.grid.Panel',
[...],
initComponent: function(){
this.callParent();
this.on('render', this.loadStore, this);
},
loadStore: function() {
this.getStore().load();
}
});
Я бы позволил контроллеру представления справиться с загрузкой магазина.
Начните с отключения автозагрузки в магазине.
Ext.define('Mb.controller.Winbiz', {
extend: 'Ext.app.Controller',
views: [
'Owners'
],
ownerStore: null,
init: function(){
this.control({
'menu #test': {click: this.onMenuTest},
});
this.ownerStore = Ext.getStore('winbiz.Owners');
},
onMenuTest: function() {
if (this.ownerStore.loaded === false) {
this.ownerStore.load(
scope: this,
callback: this.onOwnerStoreLoaded
);
}
else {
this.addToTab();
}
},
onOwnerStoreLoaded: function (store, records, successful, eOpts) {
if (successful) {
store.loaded = true;
this.addToTab();
}
},
addToTab: function () {
this.getController('Main').addToMainTab('test-gridPanel');
}
Если вы хотите изменить представление до или после загрузки магазина, это другой вопрос.
Это мой последний код контроллера:
Ext.define('Mb.controller.Winbiz', {
extend: 'Ext.app.Controller',
views: [
'Owners'
],
refs: [{ref: 'testGrid', selector: 'test-gridPanel'}],
init: function(){
this.listen({
store: {
'#Owners':{ load: this.onOwnersLoad}
}
})
this.control({
'menu #test': {click: this.onMenuTest},
'test-gridPanel': {render: this.onOwnersRender}
})
},
onMenuTest: function(){
this.getController('Main').addToMainTab('test-gridPanel');
},
onOwnersLoad: function(store){
store.loaded = true
},
onOwnersRender: function(){
var store = this.getTestGrid().getStore();
if(!store.loaded)store.load();
},
Он помещает весь код в контроллер в соответствии с предложением @pcguru и использует событие render для сокращения кода в соответствии с предложением @Lolo. Спасибо