pass extra parameters in afterrender event

[marxan]

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]

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]

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]

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]

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]

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 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]

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 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.