我有一个带有ExtJs可编辑网格的HTML页面。编辑工作正常,但我想获得编辑行的Id字段值,但无法想出来...我想用编辑的ROW的Id,Name和Email字段值填充另一个值数组...
Ext.onReady(function() {
Ext.create('Ext.data.Store', {
storeId:'myArray',
fields:['id','name', 'email'],
data:{'items':[
{"id":"1", "name":"Lisa", "email":"lisa@ArrayData.com"},
{"id":"2", "name":"Bart", "email":"bart@ArrayData.com"},
{"id":"3", "name":"Homer", "email":"home@ArrayData.com"},
{"id":"4", "name":"Marge", "email":"marge@ArrayData.com"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'ArrayData',
store: Ext.data.StoreManager.lookup('myArray'),
columns: [
{header: 'Id', dataIndex: 'id'},
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners : {
scope: this,
edit: function (theEditor, e, eOpts)
{
console.log();
}
}
})
],
height: 200,
width: 500,
renderTo: Ext.getBody()
});
});
#
#
感谢@Hariharan和@Dipti的宝贵帮助......工作代码是 -
Ext.create('Ext.data.Store', {
storeId:'myArray',
fields:['id','name', 'email'],
data:{'items':[
{"id":"1", "name":"Lisa", "email":"lisa@ArrayData.com"},
{"id":"2", "name":"Bart", "email":"bart@ArrayData.com"},
{"id":"3", "name":"Homer", "email":"home@ArrayData.com"},
{"id":"4", "name":"Marge", "email":"marge@ArrayData.com"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var array_edited=Ext.create('Ext.data.Store', {
storeId:'myArray_edited',
fields:['id','name', 'email'],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'ArrayData',
store: Ext.data.StoreManager.lookup('myArray'),
columns: [
{header: 'Id', dataIndex: 'id'},
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners : {
scope: this,
edit: function(editor, e) {
array_edited.add({
id: e.record.get('id'),
name: e.record.get('name'),
email: e.record.get('email')
});
}
}
})
],
height: 200,
width: 500,
renderTo: Ext.getBody()
});
Ext.create('Ext.grid.Panel', {
title: 'ArrayDataEdited',
store: Ext.data.StoreManager.lookup('myArray_edited'),
columns: [
{header: 'Id', dataIndex: 'id'},
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email', flex:1
}
],
selType: 'cellmodel',
height: 200,
width: 500,
renderTo: Ext.getBody()
});
答案 0 :(得分:1)
请参考以下答案,希望对您有所帮助。
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners : {
edit : function(editor, e) {
alert("Edited id value : " + e.record.get('id'));
}
}
})
],
答案 1 :(得分:0)
检查一下,你有gridPanel有三列,使用sm你可以选择editables的值,保存后你可以调用fnctChange函数并使用新的值。 希望这会对你有所帮助。
var gridPanel = new Ext.grid.GridPanel({
region : 'west',
width : 360,
height : 250,
trackMouseOver : false,
disableSelection : true,
autoscroll : true,
loadMask : true,
margins : '3 3 3 0',
sm : sm,
viewConfig : {
forceFit : true
},
store : store,
// grid columns
columns : [ sm, {
id : 'columnNames',
header : "<b>Select the column names to be displayed</b>",
dataIndex : 'columnNames',
renderer : renderColumnNames,
width : 360,
sortable : true
}, { id : 'col1ID',
header : "",
dataIndex : 'Col1',
hidden : true,
sortable : true
}, {
id : 'col2ID',
header : "",
dataIndex : 'Col2',
hidden : true,
sortable : true
}]
});
var settingPanelMsg = " <b>Change save</b><br></br>"
var settingPanel = new Ext.Panel({
region : 'center',
width : 390,
height : 250,
margins : '3 0 3 3',
collapsible : true,
html : settingPanelMsg
})
winSetting = new Ext.Window({
title : 'Customize Your chnage',
layout : 'border',
closable : false,
height : 300,
width : 730,
items : [ gridPanel, settingPanel ],
buttons : [ {
text : 'Close',
handler : function(e, target, panel) {
winLibSetting.close();
}
}, {
text : 'Save',
handler : function() {
if (fnctChange() == true) {
winLibSetting.close();
}
}
} ]
});
winLibSetting.show();
function fnctChange(){
var L1 = sm.getSelections();
for (i = 0; i < L1.length; i++) {
var col1value = L1[i].data.col1ID;
if (L1[i].data.col2ID == true) {
var colName= L1[i].data.columnNames;
Ext.MessageBox.alert(' ',
'colName :'+colName);
}
}
return true;
}