Advanced Search

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

/ Published in: JavaScript
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. getRowClass : function(record, rowIndex, p, ds){
  2.         p.cols = p.cols-1;
  3.         var content = this.bodyContent[record.id];
  4.         if(!content && !this.lazyRender){
  5.             content = this.getBodyContent(record, rowIndex);
  6.         }
  7.         if(content){
  8.             p.body = content;
  9.         }
  10.         return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
  11.     },
  12.  
  13. 	/*	If grid already has a getRowClass, don't override it
  14. 	 *	get the original class and combine it with our class 
  15. 	 */
  16. 	// @private
  17. 	combineGetRowClass: function(record, rowIndex, p, ds){
  18. 		var cls = this.originalGetRowClass(record, rowIndex, p, ds) + ' ' + this.getRowClass(record, rowIndex, p, ds);
  19. 		return cls;
  20. 	},
  21.  
  22.     init : function(grid){
  23.         this.grid = grid;
  24.  
  25.         var view = grid.getView();
  26.  
  27. 		/* create a backup copy of the original, we want to apply both the standard and our custom functions */
  28. 		if (view.getRowClass) {
  29. 			this.originalGetRowClass = this.clone(view.getRowClass);
  30. 			view.getRowClass = this.combineGetRowClass.createDelegate(this);
  31. 		} else {
  32. 			view.getRowClass = this.getRowClass.createDelegate(this);
  33. 		}
  34.  
  35.         view.enableRowBody = true;
  36.  
  37.         grid.on('render', this.onRender, this);
  38.         grid.on('destroy', this.onDestroy, this);
  39.     },
  40.  
  41. 	// @private
  42. 	clone: function(obj){
  43. 		if(obj == null || typeof(obj) != 'object')
  44. 			return obj;
  45.  
  46. 		var temp = new obj.constructor();
  47. 		for(var key in obj)
  48. 			temp[key] = clone(obj[key]);
  49.  
  50. 		return temp;
  51. 	},

URL: robboerman.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.