Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Apr 2009
    Posts
    1
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,790
    Answers
    583
    Vote Rating
    391
      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');

Tags for this Thread

Posting Permissions

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