ExtJS 3.4 GridPanel with etitable columns - contenteditable

Question

I try to implement in ExtJs 3.4 a gridpanel with editable columns.
I tried to adapt this example from ExtJS but I cant get it work.
The stored values in the database are shown and as well the add button is working.
But if I click in one cell (for example column name) nothing happens, but I would expect, that the cell is 'opened' so that I can enter a new value.
Any suggestions?
CODE SNIPPET
var fm = Ext.form;
var editGrid = new Ext.grid.GridPanel({
id: 'editTable',
title: 'Edit table SAP_SYSTEM',
header: true,
renderTo: 'contentDivSystem',
height: 350,
style: 'margin-bottom: 50px',
columns: [{
hidden: true,
header: 'id',
dataIndex: 'id',
editable: false
}, {
header: 'name',
dataIndex: 'name',
editable: true,
sortable: true,
flex: 10,
editor: new fm.TextField({
xtype: 'textfield',
allowBlank: false
})
//,
//field : {
//xtype : 'textfield',
//allowBlank : false,
//}
}, {
header: 'applicationserver',
dataIndex: 'as_host',
editable: true,
flex: 10,
sortable: true,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'systemnumber',
dataIndex: 'system_number',
editable: true,
flex: 10,
sortable: true,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'client',
dataIndex: 'client',
editable: true,
sortable: true,
flex: 10,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'language',
flex: 10,
dataIndex: 'language',
editable: true,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'saprouterstring',
dataIndex: 'sap_router_string',
editable: true,
flex: 10,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'poolcapacity',
dataIndex: 'pool_capacity',
editable: true,
flex: 10,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'pool size',
dataIndex: 'pool_size',
editable: true,
flex: 10,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 20,
align: 'center',
items: [{
icon: '../images/icons/silk/delete.png',
tooltip: 'Delete Row',
handler: function(grid, rowIndex,
colIndex) {
var rec = grid.store
.getAt(rowIndex);
if (rec.data.id !== null &&
rec.data.id !== '') {
deleteIds.push(rec.data.id);
}
grid.store.removeAt(rowIndex);
Ext.defer(layoutfunction, 10, customobject);
}
}]
}],
selType: 'cellmodel',
//plugins : [editor],
/* plugins : [ Ext.create(
'Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
}) ], */
store: myStore,
stateful: false,
border: true,
enableColumnHide: false,
enableColumnMove: false,
//loadMask : true,
//stripeRows : true,
autoScroll: true,
tbar: [{
xtype: 'button',
icon: '../images//icons/silk/add.png',
dock: 'bottom',
listeners: {
click: function() {
var grid = Ext.getCmp('editTable');
var myNewRecord = new MyRecord({
id: '',
as_host: '',
system_number: '',
client: '',
language: '',
sap_router_string: '',
pool_capacity: '',
pool_size: '',
sap_id: ''
});
grid.store.add(myNewRecord);
Ext.defer(layoutfunction, 10, customobject);
}
},
afterrender: function(cmp) {
Ext.defer(layoutfunction, 100, customobject);
}
}, {
xtype: 'button',
icon: '../images//icons/silk/disk.png',
listeners: {
click: function() {
var grid = Ext.getCmp('editTable');
save(grid.store.data.items);
}
}
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: myStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
listeners: {
beforeChange: function(pagingToolbar, params) {
deleteIds = [];
updateIds = [];
pagingToolbar.store.baseParams = {
eventPath: 'FrontEndCRUDHandler',
eventMethod: 'getSapSystemData',
jsonInput: Ext.encode({
tableName: 'SAP_SYSTEM',
start: 0,
limit: rowLimit
})
}
},
afterlayout: function() {
Ext.defer(layoutfunction, 10, customobject);
},
afterrender: function(cmp) {
Ext.defer(layoutfunction, 100, customobject);
}
}
});

Answer 1

You must use Ext.grid.EditorGridPanel ;-)