Несколько вещей, прежде чем вводить мой способ кодирования:
- Обычно я не назначаю
id Ext Objects, так как это плохая практика. Нам нужны id с в очень редких случаях, и если нет абсолютно никакого способа получить доступ к объекту без использования id (я не могу придумать причину).
- Вы ошибаетесь по поводу "У вас не может быть магазина без модели". Использование
Model - хорошая практика, но вы всегда можете определить один Store без модели, и это поможет вам создать его автоматически.
- Если у вас есть значения по умолчанию, было бы хорошо поместить их в свойства класса.
- Больше похоже на консистенции, мы заканчиваем строку запятой, а не начинаем с запятой.
Итак, чтобы немного очистить ваш код, я предложил этот фрагмент кода ( демонстрация этого кода ):
/**
* First, you might need to describe what is your class about.
*
* So this is the SimpleStore of my App bla bla..
*
* Also take note that "data" is a bit too generic to be a Namespace. Try
* something else. Namespace always defined in CamelCase.
*/
Ext.define('MyApp.data.SimpleStore', {
extend: 'Ext.data.Store',
/**
* We often define those 'default' variables in this section.
* One thing is to make it more 'ext' like.
*/
/**
* @cfg {string} url
* Description...
*/
url: 'afsud',
/**
* @cfg {string} root
* Description..
*/
root: 'data',
/**
* @cfg {string} type
* Description...
*/
type: 'json',
/**
* @cfg {boolean} autoLoad
* We make autoload = true here, so we can
* always have the store loaded on initialization
*/
autoLoad: true,
/**
* Creates the Store
* @param {Object} cfg
*/
constructor: function(cfg) {
//Since ExtJS4, we often use variable 'me' to refer 'this'.
//Thou in this case we didn't use much of 'me', but it's much
//cleaner than 'this' yeh?
var me = this;
//Simply override everything here, no special logic required.
Ext.apply(me, cfg || {});
me.proxy = {
type: 'ajax',
url: me.url,
reader: {
type: me.type,
root: me.root
}
};
me.callParent(arguments);
//Then we add our events
/**
* In ExtJS, we always add events after a constructor has been called,
* or after initComponent has been called. We then add the events by using
* this method.
*
* The .on method is defined in Ext.util.Observable. Observable is a class
* inherited by almost everything in ExtJS. It's also a nice class
* to base from if you write your own stuff which supports Event Management.
*
* .on is the shorthand for addListener, and .un is its opposite.
*
* We add an handler to the load event, with the handler defined as me.onLoad,
* and scoped to this object.
*/
me.on('load', me.onStoreLoad, me);
me.on('beforeload', me.onBeforeLoad, me);
},
/**
* This is optinal, purely just to show you the code is running
*/
onBeforeLoad: function(st) {
alert('Store is trying to retrieve data from '+st.url);
},
/**
* Handling the load event..
*
* @param {Ext.data.Store} st The store
* @param {Array} records An array of records
*/
onStoreLoad: function(st, records) {
if (!records) alert('And it seems like we cannot reach '+st.url);
}
});
//Then later in your code, you call your store.
//Remember that we set autoLoad:true, so you don't need to call
//s.load() again.
var s = Ext.create('MyApp.data.SimpleStore', {
url: 'test.php'
});
Обработка событий в ExtJS очень хорошо определена и структурирована. Вы всегда можете посетить эту страницу , чтобы узнать больше об обработке событий.
Если вы не знаете, как кодировать ExtJS, вы всегда можете посмотреть на их исходный код и поучиться у экспертов.
Дополнительные примечания
this.load(.., который вы упомянули в своем коде, на самом деле является методом, определенным в Ext.data.Store, который просит Store выполнить действие load, и в случае успеха Store загрузит callback что вы указали. Я думаю, что это не load событие, о котором вы упомянули.
Удачи и ура!