Grid with RowExpander & CellEditing = columnHeader is undefined

[slsb02]

Hello,

i have a Grid with RowExpander and CellEditing:



plugins: [{
ptype: 'rowexpander',
selectRowOnExpand:true,
rowBodyTpl: [
'<p><div style="float:left; width:330px; border:1px dotted #CCC; margin-left:10px; margin-bottom:10px;">',
'<p><div style="margin-left:5px; font-size:14px; font-weight:bold; text-decoration: underline;">'+CUS_LIST_ROWEXPANDER_CONTACT_HEADER+'</div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_PHONE_1+'</b></div><div style="width:200px; float:left;">{customers_telephone}</div><div style="clear:both;"></div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_PHONE_2+'</b></div><div style="width:200px; float:left;">{customers_telephone_two}</div><div style="clear:both;"></div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_PHONE_3+'</b></div><div style="width:200px; float:left;">{customers_telephone_three}</div><div style="clear:both;"></div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_FAX+'</b></div><div style="width:200px; float:left;">{customers_fax}</div><div style="clear:both;"></div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_HOMEPAGE+'</b></div><div style="width:200px; float:left; overflow:hidden;"><a href="{customers_homepage}" target="_blank" style="color:#000; text-decoration:none;" title="{customers_homepage}">{customers_homepage}</a></div><div style="clear:both;"></div></p>',
'</div>',
'<div style="float:left; width:330px; border:1px dotted #CCC; margin-left:10px; margin-bottom:10px;">',
'<p><div style="margin-left:5px; font-size:14px; font-weight:bold; text-decoration: underline;">'+CUS_LIST_ROWEXPANDER_STANDARD_ADDRESS+'</div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_COMPANY+'</b></div><div style="width:200px; float:left;">{address_company}</div><div style="clear:both;"></div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_NAME+'</b></div><div style="width:200px; float:left;">{address_gender} {address_firstname} {address_lastname}</div><div style="clear:both;"></div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_STREET+'</b></div><div style="width:200px; float:left;">{address_street}</div><div style="clear:both;"></div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_POSTCODE+'</b></div><div style="width:200px; float:left;">{address_country} - {address_postcode} {address_city}</div><div style="clear:both;"></div></p>',
'<p><div style="width:80px; margin-left:10px; float:left;"><b>'+CUS_LIST_ROWEXPANDER_ZONE+'</b></div><div style="width:200px; float:left;">{address_zone}</div><div style="clear:both;"></div></p>',
'</div></p><div style="clear:both;"></div>',
]
}, Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 })],
}),


Click on the expanded Row, Firebug say: columnHeader is undefined
What can i do?

The Problem is the CellEditing...

Best reegards

[sword-it]

Hi,

Did you try this in Grid:-


selType: 'cellmodel'

[slsb02]

Hi,

i have tested: selType: 'cellmodel'
and the Problem is the same!?

[sword-it]

Hi,

you can check this link :- http://examples.cutterscrossing.com/rowexpander/
it will be helpful for you.

[slsb02]

Thak you for this link...

But the Grid is without "CellEditing"?

Next, the Grid in the link is for ExtJs 2.0...

[scottmartin]

Does this work as expected?



Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../../extjs4/examples/ux');

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.RowExpander'
]);

Ext.onReady(function() {

var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Remove All',
handler: function(){
store.removeAll();
}
},
{
text: 'Add New',
handler: function(){
var record = [{name: 'Sencha', email: 'support@sencha.com', change: 100}];
store.add(record);
}
}
],
columns: [
{ header: 'Name', dataIndex: 'name', editor: { xtype: 'textfield' } },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change', editor: { xtype: 'numberfield' } }
],
height: 200,
width: 400,
plugins: [
{
ptype: 'rowexpander',
rowBodyTpl : [
'<p><b>Name:</b> {name}</p><br>',
'<p><b>Email:</b> {email}</p>'
]
},
cellEditing
],
renderTo: Ext.getBody()
});

});


Scott.