2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
9 Ext.grid.RowExpander = function(config){
\r
10 Ext.apply(this, config);
\r
13 beforeexpand : true,
\r
15 beforecollapse: true,
\r
19 Ext.grid.RowExpander.superclass.constructor.call(this);
\r
22 if(typeof this.tpl == 'string'){
\r
23 this.tpl = new Ext.Template(this.tpl);
\r
29 this.bodyContent = {};
\r
32 Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
\r
41 enableCaching: true,
\r
43 getRowClass : function(record, rowIndex, p, ds){
\r
45 var content = this.bodyContent[record.id];
\r
46 if(!content && !this.lazyRender){
\r
47 content = this.getBodyContent(record, rowIndex);
\r
52 return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
\r
55 init : function(grid){
\r
58 var view = grid.getView();
\r
59 view.getRowClass = this.getRowClass.createDelegate(this);
\r
61 view.enableRowBody = true;
\r
63 grid.on('render', function(){
\r
64 view.mainBody.on('mousedown', this.onMouseDown, this);
\r
68 getBodyContent : function(record, index){
\r
69 if(!this.enableCaching){
\r
70 return this.tpl.apply(record.data);
\r
72 var content = this.bodyContent[record.id];
\r
74 content = this.tpl.apply(record.data);
\r
75 this.bodyContent[record.id] = content;
\r
80 onMouseDown : function(e, t){
\r
81 if(t.className == 'x-grid3-row-expander'){
\r
83 var row = e.getTarget('.x-grid3-row');
\r
84 this.toggleRow(row);
\r
88 renderer : function(v, p, record){
\r
89 p.cellAttr = 'rowspan="2"';
\r
90 return '<div class="x-grid3-row-expander"> </div>';
\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
104 toggleRow : function(row){
\r
105 if(typeof row == 'number'){
\r
106 row = this.grid.view.getRow(row);
\r
108 this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
\r
111 expandRow : function(row){
\r
112 if(typeof row == 'number'){
\r
113 row = this.grid.view.getRow(row);
\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
124 collapseRow : function(row){
\r
125 if(typeof row == 'number'){
\r
126 row = this.grid.view.getRow(row);
\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