1. #1
    Sencha User
    Join Date
    Apr 2009
    Posts
    1
    Vote Rating
    0
    frugardc is on a distinguished road

      0  

    Default Unanswered: How to Change the getRowClass function on an ExtJS GridPanel viewconfig After Render

    Unanswered: How to Change the getRowClass function on an ExtJS GridPanel viewconfig After Render


    I have an Ext.grid.Panel with a function that returns a custom class that is used to color code rows in the grid by overriding the getRowClass function. This works great, but I would like to give the user the option to change the criteria by which the grid is colored. The below example, I am coloring by the "severity" attribute, but I would like to change that to "status", for example. Is there a way I can dynamically change the getRowClass function,or maybe the entire viewconfig on the grid, and have the grid recolor, after the grid has already been rendered?
    </span>
    Code:
        alarmsGrid = Ext.create('Ext.grid.Panel', 
    {    title: 'Netcool Alarms', 
       id: 'Netcool Alarms', 
       columnLines: true, 
       store: alarms_store,
        loadMask: true, 
       stripeRows: true, 
    viewConfig: { 
             getRowClass: function(record, rowIndex, rowParams, store){ 
                       return record.get('severity').toLowerCase(); 
           } 
       },
    Note:
    Code:
    alarmsGrid.viewConfig.getRowClass = function(record, rowIndex, rowParams, store){ return record.get('status').toLowerCase(); }
    seems to have no effect
    Last edited by frugardc; 28 Dec 2012 at 11:34 AM. Reason: Formatting messed up

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,599
    Answers
    3448
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would use a single field and then change the value of that field. Once you do that, the grid will refresh the view and execute the configured getRowClass method.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,492
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The viewConfig is used to configure the grid's view, which is a separate child component of the grid. The docs for it are here (notice getRowClass):

    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.View

    Once the grid has been instantiated the viewConfig is irrelevant, you need to work with the grid's view directly instead. You can change the function getRowClass on the view but if you just want to change the field it uses then you'd be better off just storing the field name on the view and reading that in from getRowClass:

    Code:
    rowClsField: 'severity',
    
    getRowClass: function(record) {
        return record.get(this.rowClsField).toLowerCase();
    },
    
    setRowClsField: function(field) {
        this.rowClsField = field;
        this.refresh();
    }
    Here this will be the grid view.

    To do the update you'd then do something like:

    Code:
    grid.getView().setRowClsField('status');