ExtJs auditeurs

Dans ExtJS les événements sont gérés à l'aide de deux façons:

Tout d'abord, Vous pouvez ajouter dans votre config auditeurs objet:

var s = Ext.create('data.SimpleStore',{
url:'test.php',
listeners: {
'load': function(store, records, successful,operation, options) {
//Here you are handling onload event
}
} //Don't forget to close all code blocks
});
s.load();

Deuxièmement, vous pouvez utiliser on méthode:

var s = Ext.create('data.SimpleStore',{url:'test.php'});
s.on('load', function(store, records, successful,operation, options) {
//Here you are handling onload event
});
s.load();

Quelques chose avant d'introduire ma façon de coder:

1. Je n'ai pas affecter id à Ext Objets, que c'est une mauvaise pratique. Nous avons seulement besoin de ids dans de très rares cas, et à moins qu'il n'y a absolument aucun moyen d'accéder à un objet sans l'aide d'un id (je ne peux pas penser à une raison).
2. Vous vous trompez au sujet de "Vous ne pouvez pas avoir un magasin sans un modèle". À l'aide de Model est une bonne pratique, mais vous pouvez toujours définir un Store sans modèle, et il va vous aider à en créer un automatiquement.
3. Si vous avez des valeurs par défaut, ça va être bon de le mettre dans les propriétés de la classe.
4. Plus comme pour les incohérences, nous la fin d'une ligne avec la virgule, ne pas commencer par des virgules.

Afin de nettoyer votre code un peu, je suis sorti avec ce morceau de code (démo de ce code):

/**
* 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'
});

La gestion des événements, ExtJS est très bien défini et structuré. Vous pouvez toujours visitez cette page pour en savoir plus sur la gestion des Événements.

Si vous ne savez pas comment code ExtJS, vous pouvez toujours regarder leur code source et d'apprendre auprès d'experts.

Note

La this.load(.. vous l'avez mentionné dans votre code est en fait une méthode définie dans Ext.data.Store, qui demande à l' Store pour exécuter la load action, et en cas de succès, le Store charge callback que vous avez spécifié. Je pense que ce n'est pas le load cas que vous avez mentionné.

Bonne chance et bravo!