examples/grid/RowExpander.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.grid.RowExpander = function(config){\r
  10     Ext.apply(this, config);\r
  11 \r
  12     this.addEvents({\r
  13         beforeexpand : true,\r
  14         expand: true,\r
  15         beforecollapse: true,\r
  16         collapse: true\r
  17     });\r
  18 \r
  19     Ext.grid.RowExpander.superclass.constructor.call(this);\r
  20 \r
  21     if(this.tpl){\r
  22         if(typeof this.tpl == 'string'){\r
  23             this.tpl = new Ext.Template(this.tpl);\r
  24         }\r
  25         this.tpl.compile();\r
  26     }\r
  27 \r
  28     this.state = {};\r
  29     this.bodyContent = {};\r
  30 };\r
  31 \r
  32 Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {\r
  33     header: "",\r
  34     width: 20,\r
  35     sortable: false,\r
  36     fixed:true,\r
  37     menuDisabled:true,\r
  38     dataIndex: '',\r
  39     id: 'expander',\r
  40     lazyRender : true,\r
  41     enableCaching: true,\r
  42 \r
  43     getRowClass : function(record, rowIndex, p, ds){\r
  44         p.cols = p.cols-1;\r
  45         var content = this.bodyContent[record.id];\r
  46         if(!content && !this.lazyRender){\r
  47             content = this.getBodyContent(record, rowIndex);\r
  48         }\r
  49         if(content){\r
  50             p.body = content;\r
  51         }\r
  52         return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';\r
  53     },\r
  54 \r
  55     init : function(grid){\r
  56         this.grid = grid;\r
  57 \r
  58         var view = grid.getView();\r
  59         view.getRowClass = this.getRowClass.createDelegate(this);\r
  60 \r
  61         view.enableRowBody = true;\r
  62 \r
  63         grid.on('render', function(){\r
  64             view.mainBody.on('mousedown', this.onMouseDown, this);\r
  65         }, this);\r
  66     },\r
  67 \r
  68     getBodyContent : function(record, index){\r
  69         if(!this.enableCaching){\r
  70             return this.tpl.apply(record.data);\r
  71         }\r
  72         var content = this.bodyContent[record.id];\r
  73         if(!content){\r
  74             content = this.tpl.apply(record.data);\r
  75             this.bodyContent[record.id] = content;\r
  76         }\r
  77         return content;\r
  78     },\r
  79 \r
  80     onMouseDown : function(e, t){\r
  81         if(t.className == 'x-grid3-row-expander'){\r
  82             e.stopEvent();\r
  83             var row = e.getTarget('.x-grid3-row');\r
  84             this.toggleRow(row);\r
  85         }\r
  86     },\r
  87 \r
  88     renderer : function(v, p, record){\r
  89         p.cellAttr = 'rowspan="2"';\r
  90         return '<div class="x-grid3-row-expander">&#160;</div>';\r
  91     },\r
  92 \r
  93     beforeExpand : function(record, body, rowIndex){\r
  94         if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){\r
  95             if(this.tpl && this.lazyRender){\r
  96                 body.innerHTML = this.getBodyContent(record, rowIndex);\r
  97             }\r
  98             return true;\r
  99         }else{\r
 100             return false;\r
 101         }\r
 102     },\r
 103 \r
 104     toggleRow : function(row){\r
 105         if(typeof row == 'number'){\r
 106             row = this.grid.view.getRow(row);\r
 107         }\r
 108         this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);\r
 109     },\r
 110 \r
 111     expandRow : function(row){\r
 112         if(typeof row == 'number'){\r
 113             row = this.grid.view.getRow(row);\r
 114         }\r
 115         var record = this.grid.store.getAt(row.rowIndex);\r
 116         var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);\r
 117         if(this.beforeExpand(record, body, row.rowIndex)){\r
 118             this.state[record.id] = true;\r
 119             Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');\r
 120             this.fireEvent('expand', this, record, body, row.rowIndex);\r
 121         }\r
 122     },\r
 123 \r
 124     collapseRow : function(row){\r
 125         if(typeof row == 'number'){\r
 126             row = this.grid.view.getRow(row);\r
 127         }\r
 128         var record = this.grid.store.getAt(row.rowIndex);\r
 129         var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);\r
 130         if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){\r
 131             this.state[record.id] = false;\r
 132             Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');\r
 133             this.fireEvent('collapse', this, record, body, row.rowIndex);\r
 134         }\r
 135     }\r
 136 });\r