ExtJs Listeners

Question

I want to get the onload event working on my configuration object.

The following works, except when I create

config.listeners={..} 

(i think i need?) to replace

 this.onload({...}); 

Do I even use the correct config? (I have no idea about event handling)

 Ext.define('data.SimpleStore', { extend: 'Ext.data.Store' ,constructor: function (config) { config.url=config.url||"afsud"; //If no call, we assume that url has been passed. Pass neither and be shot config.id=config.url+'Store';//call should be unique, else its another set of headaches. //console.log(config); Ext.define(config.id+'M', { //for a painful reason, you cant have a store without a model extend: 'Ext.data.Model', fields: []//we figure these out anyways }); config.root=config.root||'data'; config.type=config.type||'json'; config.proxy= config.proxy||{ //note if we override our proxy, then server.php might not work as black magic type: 'ajax' ,url : config.url ,reader: { type: config.type//seriously if you want to change this, go away ,root: config.root//we assume. } }; config.model=config.id+'M';//model should match store anyway. Generic models are out of scope atm config.listeners={ //this.populateFields //Error'd }; this.callParent([config]); this.load({//This works, but its after the parent call, so not exactly what i want callback: function(records,operation,success){ var obj=Ext.decode(operation.response.responseText); this.add(obj[config.root]); console.log(this.getRange()); console.log(config); } }); } ,populateFields:function(){ console.log('ran'); // never happens } }); var s= Ext.create('data.Store',{url:'test.php'}); s.load(); 

Answer 1

ExtJS events are managed in two ways:

First, you can add listeners to your configuration object:

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

Secondly, you can use the on method:

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

Answer 2

A few things before introducing my coding method:

• I usually don’t assign id Ext Objects, as this is bad practice. We need only id in very rare cases, and if there is absolutely no way to access the object without using id (I can not think of a reason).
• You are mistaken about "You do not have a store without a model." Using Model is good practice, but you can always define one Store without a model, and this will help you create one automatically.
• If you have default values, it will be useful to put it in class properties.
• More like consistency, we end the line with a comma rather than starting with a comma.

So, to clean up your code a bit, I came out with this piece of code ( demo of this 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 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 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 event handling is very well defined and structured. You can always visit this page to learn more about event handling.

If you do not know how to code ExtJS, you can always look at the source code and ask experts.

Additional note

this.load(.. , which you mentioned in your code, is actually a method defined in Ext.data.Store that asks the Store to execute the load action, and upon successful completion, the Store load the callback that you specified. I think that this is not the load event you mentioned.

Good luck and greetings!

Answer 3

To add to Molecule the first answer that I often use in my enterprise applications because it is more concise and easier to read.

It is often easier to use the bus to transfer messages around your application.

 myApp.Bus = new Ext.util.Observable(); myApp.Bus.addEvents( 'myCustomEvent' ); 

Then in your application to start the bus, do the following:

 myApp.Bus.fireEvent( 'myCustomEvent', {someData: value} ); 

And where do you want to listen to the event:

 ... // config myObj.on('myCustomEvent', function(someData) { doSomething(); }, this); 

Answer 4

Be sure to attach events when components have been rendered. My solution overrides the initEvents() function

 Ext.define('MyApp.grid.MyGrid', { extend: 'Ext.grid.Panel', initEvents: function() { // attach events here this.callParent(arguments) } });