THE BLOG

News, tips and tricks from 2Gears

ExtJS RowExpander plugin overriding default getRowClass

Posted · 5 Comments

ExtJS (3) is great for OO style interface design but has a couple of strange behaviors. For instance when adding the ExtJS RowExpander plugin to a grid, the plugin overrides the gridView’s getRowClass function. That’s not really what you want. For instance, I want to mark certain records in a grid red when they are overdue, and also use the RowExpander plugin. The plugin however throws away my own custom formatting.
Solution is to create a backup copy of the default getRowClass function and call both the plugin function and the original, concatenating the results together with a space

getRowClass: function(record, rowIndex, p, ds) {
    p.cols = p.cols - 1;
    var content = this.bodyContent[record.id];
    if (!content && !this.lazyRender) {
        content = this.getBodyContent(record, rowIndex);
    }
    if (content) {
        p.body = content;
    }
    return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
},

/*	If grid already has a getRowClass, don't override it
 *	get the original class and combine it with our class 
 */
// @private
combineGetRowClass: function(record, rowIndex, p, ds) {
    var cls = this.originalGetRowClass(record, rowIndex, p, ds) + '"" + this.getRowClass(record, rowIndex, p, ds);
    return cls;
},

init: function(grid) {
    this.grid = grid;

    var view = grid.getView();

    /* create a backup copy of the original, we want to apply both the standard and our custom functions */
    if (view.getRowClass) {
        this.originalGetRowClass = this.clone(view.getRowClass);
        view.getRowClass = this.combineGetRowClass.createDelegate(this);
    } else {
        view.getRowClass = this.getRowClass.createDelegate(this);
    }

    view.enableRowBody = true;

    grid.on('render', this.onRender, this);
    grid.on('destroy', this.onDestroy, this);
},

// @private
clone: function(obj) {
    if (obj == null || typeof(obj) != 'object') return obj;

    var temp = new obj.constructor();
    for (var key in obj)
    temp[key] = clone(obj[key]);

    return temp;
}

5 Responses to "ExtJS RowExpander plugin overriding default getRowClass"
  1. Min says:

    Never mind, I figured out the problem, it is a simple copy and paste error.

  2. Min says:

    Hi Rob, thanks for the nice post. However, I have tried to change RowExpander.js as you have shown here, but it failed to apply my custom getRowClass defined in my grid.I have defined my own custom getRowClass in my GridPanel as follows:

    viewConfig: {
    getRowClass: function (record, index) {
    var state = record.data.state;
    var vstate = record.data.vstate;
    if (state == ‘Down’ && vstate == ‘Running’) {
    return ‘alert-asset’;
    }
    }
    }

    I added some print at your function
    combineGetRowClass: function(record, rowIndex, p, ds) {
    var cls = this.originalGetRowClass(record, rowIndex, p, ds) + ‘ ‘ + this.getRowClass(record, rowIndex, p, ds);
    return cls;
    },

    found that cls just returns x-grid3-row-collapsed twice. Do you know what is going wrong here?

    -min

  3. armance says:

    hi ,thanks for this article,thats exactly the problem im facing..but i dont know wher to use ur code,tried t use it on Ext.override(Ext.grid.RowExpander,{..
    but it seems not the correct way.please reply to me as soon as possible,thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

three × 3 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>