带有可编辑列的 ExtJS 3.4 GridPanel
ExtJS 3.4 GridPanel with etitable columns
我尝试在 ExtJs 3.4 中实现一个具有可编辑列的 gridpanel
。
我试图从 ExtJS 改编这个 example 但我无法让它工作。
显示数据库中存储的值,并且 add
按钮正在工作。
但是如果我单击一个单元格(例如 name
列)什么也不会发生,但我希望该单元格是 'opened' 以便我可以输入一个新值。
有什么建议吗?
代码片段
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);
}
}
});
您必须使用 Ext.grid.EditorGridPanel
;-)
我尝试在 ExtJs 3.4 中实现一个具有可编辑列的 gridpanel
。
我试图从 ExtJS 改编这个 example 但我无法让它工作。
显示数据库中存储的值,并且 add
按钮正在工作。
但是如果我单击一个单元格(例如 name
列)什么也不会发生,但我希望该单元格是 'opened' 以便我可以输入一个新值。
有什么建议吗?
代码片段
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);
}
}
});
您必须使用 Ext.grid.EditorGridPanel
;-)