GridRowExapander(another rowexpander)

[zhansheng]

Want to attach a complicate layouted panel to row body when row expending?

code like this:



new Ext.ux.GridRowExpander({

scope: this,

getExpanderContentUI : function(record, index) {

var contentPanel = new Ext.TabPanel({

border : false,
bodyBorder : false,
tabPosition : 'bottom',
deferredRender : false,

listeners : {
render : function() {

//maybe we can update tab content here....

Ext.getCmp('tab0').body.update('this is tab0... ...');
Ext.getCmp('tab1').body.update('this is tab1... ...');


},

scope : this

},

items : [{

autoScroll : true,
height : 100,
id : 'tab0',
title : 'tab0'

}
,

{

autoScroll : true,
height : 100,
id : 'tab1',
title : 'tab1'

}});
return contentPanel;
}
})



plugin code(modified from origin one):

Ext.ux.GridRowExpander = function(config) {
Ext.apply(this, config);
Ext.ux.GridRowExpander.superclass.constructor.call(this);

this.state = {};

// record.id --> rendered
this.renderTrace = {};

this.addEvents({
beforeexpand : true,
expand : true,
beforecollapse : true,
collapse : true
});

};

Ext.extend(Ext.ux.GridRowExpander, Ext.util.Observable, {
header : "",
width : 20,
sortable : false,
fixed : true,
dataIndex : '',
id : 'expander',
lazyRender : true,
enableCaching : true,

clean : function() {

this.state = {};
this.renderTrace = {};

},

getRowClass : function(record, rowIndex, p, ds) {

return this.state[record.id]
? 'x-grid3-row-expanded'
: 'x-grid3-row-collapsed';
},


init : function(grid) {
this.grid = grid;

var view = grid.getView();
view.getRowClass = this.getRowClass.createDelegate(this);

view.enableRowBody = true;


grid.on('render', function() {
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);

},

onMouseDown : function(e, t) {

if (t.className == 'x-grid3-row-expander') {
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
this.toggleRow(row);
}
},

toggleRow : function(row) {
if (typeof row == 'number') {
row = this.grid.view.getRow(row);
}
this[Ext.fly(row).hasClass('x-grid3-row-collapsed')
? 'expandRow'
: 'collapseRow'](row);
},

renderer : function(v, p, record) {
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"> </div>';
},

expandRow : function(row) {
if (typeof row == 'number') {
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body',
row);

if (this.fireEvent('beforexpand', this, record, body, row.rowIndex) !== false) {

Ext.fly(row).replaceClass('x-grid3-row-collapsed',
'x-grid3-row-expanded');

if (this.fireEvent('expand', this, record, body, row.rowIndex) !== false) {

this.state[record.id] = true;

// already rendered?
if (this.renderTrace[record.id]) {
return;
}

// render content penel to row body...

var contentUI = this.getExpanderContentUI.call(
this.scope || this, record,
row.rowIndex);

contentUI.render(body);

// set rendered flag
this.renderTrace[record.id] = true;

}
}
},

collapseRow : function(row) {
if (typeof row == 'number') {
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
if (this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false) {
this.state[record.id] = false;

Ext.fly(row).replaceClass('x-grid3-row-expanded',
'x-grid3-row-collapsed');
this.fireEvent('collapse', this, record, body, row.rowIndex);
}
}
});

[analpaper]

nice one!
just a little mistake, where says beforcollapse and beforexpand must say beforecollapse and beforeexpand.

thanks for your time :o]

[zhansheng]

fixed
thanks:)