我已经创建了编辑器网格面板，但我无法为删除行添加列。我尝试了几个版本，但没有任何结果。这是我的代码。我想添加删除列，其行像图标一样不像tbar按钮。
this.libraryListGrid = new Ext.grid.EditorGridPanel({
clicksToEdit: 1,
colModel: new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'name',
editable: !this.config.viewOnly,
editor: new Ext.form.TextField({
allowBlank: true,
controllerThis: this,
listeners: {
blur: function(item){
var record =item.getValue();
var valid = true;//this.controllerThis.libraryListGrid.isValidValue(record);
item.setValue(record);
item.setValue(record);
}
}
}),
header: ' ',
id: 'name'
},
{
header: ' ',
text:'delete',
items: [{
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//rec.store.remove();
alert("Delete " + rec.get('name'));
grid.getStore().remove(rec);
//grid.getStore().removeAt(rowIndex);
}
}]
}
]
}),
ds: this.libraryListDataStore,
height: 200,
width: 'auto',
isValidValue: function(field) {
return true;
var valid = new RegExp(/|s|/).test(field);
if(field.match(/^[s]/)){
helpsys.replaceFlashArea("Can not contain spaces!");
valid = false;
}else{
if(!field.length >= 10){
helpsys.replaceFlashArea("lenght is longer then 10,10 is mximal size for this field!");
valid = false;
}
}
this.store.each(function (record){
if (record.id != this.gridEditor.record.id && record.get('name') == this.getValue()
&& record.get('name').length > 0) {
valid = false;
return false;
}
}, field);
if (!valid) {
helpsys.replaceFlashArea(helpsys.locale.jobs.agent_environment.agent_environment_variables_validation);
}
this.allowEdit = valid;
return valid;
},
allowEdit: true,
forceValidation: true,
loadMask: true,
renderTo: 'libraryListGrid',
selModel: new helpsys.AddRowSelectionModel(),
stripeRows: true,
tbar: [{
disabled: this.config.viewOnly,
text: helpsys.locale.agent_environments.add_variable_button,
handler : function(){
// access the Record constructor through the grid's store
var Plant = this.libraryListGrid.getStore().recordType;
var p = new Plant({
});
this.libraryListGrid.stopEditing();
this.libraryListDataStore.insert(0, p);
this.libraryListGrid.startEditing(0, 0);
},
scope: this
}],
view: new Ext.ux.grid.BufferView({
autoFill: true,
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
}
})
});
}
答案 0 :(得分：2)
我也想做这种类型的要求。我已经使用过这段代码，试试吧。它对我有用。
var userCM = new Ext.grid.ColumnModel([
{
header: "UserName",
width: 15,
sortable: true,
dataIndex: 'username',
editor:new Ext.form.TextField({
readOnly:true
})
},{
xtype:'actioncolumn',
width: 5,
align: "center",
header: "Action",
id:'userEmailDeleteId',
icon: '../images/delete.png',
tooltip: 'Delete Email',
handler: function(grid,rowIndex) {
// write your logic here
}
}])
答案 1 :(得分：0)
感谢您的帮助，但我发现了另一种有趣的方式。
this.libraryListGrid = new Ext.grid.EditorGridPanel({
clicksToEdit: 1,
colModel: new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'name',
editable: !this.config.viewOnly,
editor: new Ext.form.TextField({
allowBlank: true,
controllerThis: this,
listeners: {
blur: function(item){
var record =item.getValue();
var valid = this.controllerThis.libraryListGrid.isValidValue(item);
if(valid){
item.setValue(record);
}else{
item.setValue(record);
}
}
}
}),
header: ' ',
id: 'name'
},
{
header: '',
menuDisabled: true,
width: 35,
dataIndex: '',
fixed: true,
renderer: this.renderActions
}
]
}),
ds: this.libraryListDataStore,
height: 200,
width: 'auto',
isValidValue: function(field) {
var valid = true;
valid = field.match(/\s/);
if(!valid){
helpsys.replaceFlashArea("Can not contain spaces!");
return false;
}else{
if(!field.length >= 10){
helpsys.replaceFlashArea("lenght is longer then 10,10 is mximal size for this field!");
return false;
}
}
this.store.each(function (record){
if (record.id != this.gridEditor.record.id && record.get('name') == this.getValue()
&& record.get('name').length > 0) {
helpsys.replaceFlashArea(helpsys.locale.jobs.agent_environment.agent_environment_variables_validation);
return false;
}
}, field);
return valid;
},
allowEdit: true,
listeners: {
rowclick: {
fn: onRowClick,
scope: this
}
},
forceValidation: true,
loadMask: true,
renderTo: 'libraryListGrid',
selModel: new helpsys.AddRowSelectionModel(),
stripeRows: true,
tbar: [{
disabled: this.config.viewOnly,
text: helpsys.locale.agent_environments.add_variable_button,
handler : function(){
// access the Record constructor through the grid's store
var Plant = this.libraryListGrid.getStore().recordType;
var p = new Plant({
});
this.libraryListGrid.stopEditing();
this.libraryListDataStore.insert(0, p);
this.libraryListGrid.startEditing(0, 0);
},
scope: this
}],
view: new Ext.ux.grid.BufferView({
autoFill: true,
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
}
})
});
},
renderActions: function(value, metadata, record, rowIndex, colIndex, store){
var columnValue = '<div class="rowAction deleteAction" ><div class="iconLinkIcon deleteIcon"></div></div>';
return columnValue;
}