Return to Snippet

Revision: 39155
at January 14, 2011 03:02 by misterb101


Initial Code
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;
	},

Initial URL
robboerman.com

Initial Description
ExtJS 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

Initial Title
Prevent ExtJS grid plugin from overriding the default getRowClass method of Grid View

Initial Tags
javascript

Initial Language
JavaScript