Posted By

misterb101 on 01/14/11


Tagged

javascript extjs


Versions (?)

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


 / Published in: JavaScript
 

URL: robboerman.com

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

  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. },

Report this snippet  

You need to login to post a comment.