PDA

View Full Version : pass extra parameters in afterrender event



marxan
8 Apr 2014, 12:45 AM
Hello,

I want to set a label in the afterrender event. For this I have to pass it the id of the label as I want to use the same function several times.
I can pass it like this:

'nrrSeries': { afterrender: me.setUpdate('updateDateNrr')
},

But in this case I lose the focus I have on the object selected. In this case nrrSeries is a grid.


setUpdate: function (grid,labelId) {
grid.dockedItems.getAt(1).items.getByKey(labelId).setText('Last update: '+Global.lastUpdate);
},

Anyone could tell how I can pass this extra parameter and still keeping my grid in the function.

In other words what should I put before the updateDateNrr arguments to keep my grid in the function called?


afterrender: me.setUpdate(?,'updateDateNrr')

Thanks in advance,

Regards,

Anthony

Zinnia
9 Apr 2014, 10:57 PM
Without passing extra parameter in afterrender function, you can get the grid using ComponentQuery.

var grid = Ext.ComponentQuery.query('grid[itemId=myGrid]')[0];


Set the label text Dynamically using below code

Ext.ComponentQuery.query('label[itemId=myLebel]')[0].setText("new text");

marxan
9 Apr 2014, 11:40 PM
Without passing extra parameter in afterrender function, you can get the grid using ComponentQuery.

var grid = Ext.ComponentQuery.query('grid[itemId=myGrid]')[0];


Set the label text Dynamically using below code

Ext.ComponentQuery.query('label[itemId=myLebel]')[0].setText("new text");

Hi Zinnia,

Thanks for your answer, however the problem is that I want to pass the content of my label as a parameter, that's why I need to pass it as a parameter...

burnnat
10 Apr 2014, 6:37 AM
With such small snippets of code, it's hard to tell exactly what you're looking for, but it sounds to me like you may want to use a closure:


init: function() {
var nrrSeries = new Ext.grid.Panel({
// ...
});

var labelId = 'updateDateNrr';

nrrSeries.on({
afterrender: function(grid) {
me.setUpdate(grid, labelId);
}
});
}

Is that close to what you want?

marxan
10 Apr 2014, 7:00 AM
With such small snippets of code, it's hard to tell exactly what you're looking for, but it sounds to me like you may want to use a closure:



init: function() {
var nrrSeries = new Ext.grid.Panel({
// ...
});

var labelId = 'updateDateNrr';

nrrSeries.on({
afterrender: function(grid) {
me.setUpdate(grid, labelId);
}
});
}


Is that close to what you want?Hello burnnat,It's almost what I need.
Here's what I do for the moment:

init: function ()
{ var me = this;
me.setGlobalLastUpdate();
this.control({
'TaxSSC': { afterrender: me.setUpdateTaxSSC },
'MetrSeries': afterrender: me.setUpdateTraps },......

setUpdateTraps: function (grid){ grid.dockedItems.getAt(1).items.getByKey('updateDateTraps').setText('Last update: ' + Global.lastUpdate[Global.indicatorGroup]);
setUpdateTaxSSC: function (grid){ grid.dockedItems.getAt(1).items.getByKey('updateDateTaxSsc').setText('Last update: ' + Global.lastUpdate[Global.indicatorGroup]);...},

I actually want to pass the id of the label I will update.
At the moment you can see that I have to call a different function for each grid I have defined.
By just doing this in the control:
'TaxSSC': { afterrender: me.setUpdateTaxSSC },
I don't have to define the grid concerned, it is automatically passed in parameter.
But I would to pass an extra string parameter 'updateDateTaxSsc' for the TaxSSC for instance.
If I could do that I won't need to define several functions doing the same thing but just to another labelId.


I hope my explanation is clear so far now.

burnnat
10 Apr 2014, 7:17 AM
Thanks, marxan - that makes things clearer. So one option would be to use closures in a way similar to what I suggested before, this would look like:


init: function() {
this.control({
'TaxSSC': {
afterrender: function(grid) {
this.setUpdate(grid, 'updateDateTaxSsc');
}
},
'MetrSeries': {
afterrender: function(grid) {
this.setUpdate(grid, 'updateDateTraps');
}
}
});
},

setUpdate: function(grid, labelId) {
grid.dockedItems.getAt(1).items.getByKey(labelId).setText('Last update: ' + Global.lastUpdate[Global.indicatorGroup]);
// ...
}

Otherwise, you could switch the order of the arguments for the setUpdate method and use the Ext.pass (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-pass) function which creates a closure for you under-the-hood:


init: function() {
this.control({
'TaxSSC': {
afterrender: Ext.pass(this.setUpdate, ['updateDateTaxSsc'])
},
'MetrSeries': {
afterrender: Ext.pass(this.setUpdate, ['updateDateTraps'])
}
});
},

setUpdate: function(labelId, grid) {
grid.dockedItems.getAt(1).items.getByKey(labelId).setText('Last update: ' + Global.lastUpdate[Global.indicatorGroup]);
// ...
}

Switching the argument order in this case is necessary here because Ext.pass inserts the extra arguments before the "natural" arguments of the function.

marxan
11 Apr 2014, 4:41 AM
Thans burnnat, it works fine now, you saved me 6 useless functions :-)


Thanks, marxan - that makes things clearer. So one option would be to use closures in a way similar to what I suggested before, this would look like:


init: function() {
this.control({
'TaxSSC': {
afterrender: function(grid) {
this.setUpdate(grid, 'updateDateTaxSsc');
}
},
'MetrSeries': {
afterrender: function(grid) {
this.setUpdate(grid, 'updateDateTraps');
}
}
});
},

setUpdate: function(grid, labelId) {
grid.dockedItems.getAt(1).items.getByKey(labelId).setText('Last update: ' + Global.lastUpdate[Global.indicatorGroup]);
// ...
}

Otherwise, you could switch the order of the arguments for the setUpdate method and use the Ext.pass (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-pass) function which creates a closure for you under-the-hood:


init: function() {
this.control({
'TaxSSC': {
afterrender: Ext.pass(this.setUpdate, ['updateDateTaxSsc'])
},
'MetrSeries': {
afterrender: Ext.pass(this.setUpdate, ['updateDateTraps'])
}
});
},

setUpdate: function(labelId, grid) {
grid.dockedItems.getAt(1).items.getByKey(labelId).setText('Last update: ' + Global.lastUpdate[Global.indicatorGroup]);
// ...
}

Switching the argument order in this case is necessary here because Ext.pass inserts the extra arguments before the "natural" arguments of the function.