How to combine rowediting and rowexpander together correctly in extjs?
I am developing a web application in ExtJS . The application is a grid where some of the grid`s rows can be expanded to show supplementary information as a nested grid. And user can edit rows in parent grid.
But I have problems with it. The nested grid is normally rendered , but when I want to update one of the field nested grid disappear.
There is testing version of my application and some screenshots.
The Code ( below you can find screens)
Ext.onReady(function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
},
{
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
plugins: [{
ptype: 'rowexpander',
pluginId: 'courseListGridExpander',
expandOnDblClick: false,
selectRowOnExpand: false,
enableCaching: false,
rowBodyTpl: ['']
},
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 2,
autoCancel: false
})
],
viewConfig: {
listeners: {
expandbody: function(rowNode, record, expandbody) {
var targetId = 'SessionInstructionGridRow';
if (Ext.getCmp(targetId + "_grid") == null) {
var sessionInstructionGrid = Ext.create('Ext.grid.Panel', {
renderTo: targetId,
id: targetId + "_grid",
title: 'Nested One',
columns: [{
header: 'Halo',
flex: 1
},
{
header: 'Halo 2',
flex: 1
}
]
});
rowNode.grid = sessionInstructionGrid;
sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, {
ClientSessionId: record.get('ClientSessionId')
});
}
},
celldblclick: function(gr, td, cellIndex, record) {
//alert("@@@");
}
}
},
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name',
editor: {
allowBlank: false
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone'
}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Ext.create('Ext.button.Button', {
text: 'Hello',
handler: function() {
}
})
});
I would give the ComponentRowExpander plugin a try. It's intended to insert any component in a rowexpander - so it should work with a grid, too.
链接地址: http://www.djcxy.com/p/67646.html上一篇: 列渲染，听取<i>标签的点击事件？