Question

There are 2 buttons on a Ext.WIndow. When i click on the Button 1, the following code get executed.

When i click on the Button 2, the second set of the code gets executed. Both these buttons will load from the Store

The problem;

When i click on the 1st Button, The following console.log statements gets printed (Which is the way i expected)

console.log ('win 1');
console.log('Came win 1');

After this when i click on the 2nd Button, I get the incorrect console.log gets displayed.

console.log ('win 2');
console.log('Came win 1'); // Which is coming from the 1st Buttons Load function.

Button 1

        var personCus= Ext.getStore('Person');
        var record = personCus.getAt(0);
    console.log ('win 1');
    personCus.on('load', function() {
console.log('Came win 1');
        var label= Ext.ComponentQuery.query('#win1> #labido')[0];
        label.setText(record1.get('id'));
}

Button 2

        var personCus= Ext.getStore('Person');
        var record = personCus.getAt(0);
    console.log ('win 2');
    personCus.on('load', function() {
console.log('Came win 3');
        var label= Ext.ComponentQuery.query('#win2> #labid1')[0];
        label.setText(record1.get('id'));
}

Answer 1

I think majority of your issue is simply because you’re subscribing to the load event several times. Basically when you execute Button2 code – store will have two handlers for load even and they will run both.

Usually when you subscribe to the load event you want to add { single: true } option, so the handler will get called once and will be removed from the store.

store.on('load', 
   function() {...},  
   scope /* this or something like it... */,
   { single: true }
);