Results 1 to 7 of 7

Thread: pass extra parameters in afterrender event

  1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    216
    Answers
    4

    Default Answered: pass extra parameters in afterrender event

    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:
    Code:
               '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.

    Code:
     	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?

    Code:
    afterrender: me.setUpdate(?,'updateDateNrr')
    Thanks in advance,

    Regards,

    Anthony

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

    Code:
    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:

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

  3. #2
    Sencha User
    Join Date
    Mar 2011
    Location
    Hyderabad
    Posts
    106
    Answers
    10

    Default

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

  4. #3
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    216
    Answers
    4

    Default

    Quote Originally Posted by Zinnia View Post
    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...

  5. #4
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    418
    Answers
    42

    Default

    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:

    Code:
    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?
    Last edited by burnnat; 10 Apr 2014 at 6:38 AM. Reason: Fix the code...

  6. #5
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    216
    Answers
    4

    Default almost

    Quote Originally Posted by burnnat View Post
    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:


    Code:
    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:
    Code:
      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:
    Code:
    '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.

  7. #6
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    418
    Answers
    42

    Default

    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:

    Code:
    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:

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

  8. #7
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    216
    Answers
    4

    Default Thanks!

    Thans burnnat, it works fine now, you saved me 6 useless functions :-)

    Quote Originally Posted by burnnat View Post
    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:

    Code:
    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:

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •