在rowEditing定义中,listeners下添加edit监听事件,点击保存可以进行相应操作
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
saveBtnText: '保存',cancelBtnText: '取消',
//errorsText: '错误信息',
//dirtyText: '已修改,你需要提交或取消变更',
clicksToEdit: 2,//点击2次进行修改
autoCancel: false,
errorSummary: false, //把自带的验证隐藏
listeners: {
edit:function(rowEditing,context) {//点击保存
Ext.Ajax.request({
url : sysPath + '/storeAccount/addOrUpdateAccount',
params:context.record.data,//需要保存的内容
method:'POST',
success: function(action){
Ext.Msg.alert('友情提示','保存成功');
accountChildStore.load();
},
failure: function(action){
Ext.Msg.alert('友情提示','保存失败');
}
});
},
cancelEdit: function(rowEditing, context) {//点击取消
if (context.record.phantom) {
accountChildStore.remove(context.record);
}
}
}
});
我们在grid.Panel中难免会有部分内容是有要求的,例如不为空
{
text : '真实姓名',
sortable : true,
width : 80,
dataIndex : 'userName',
field: {
xtype: 'textfield',
allowBlank : false
}
}
在上面的userName内容不为空,直接加上allowBlank : false的话,你会发现update(保存)按钮变为灰色无法操作,就算你填写了内容,依然灰色
此时只需要加上如下代码可解决:
//新增时校验通过显示保存按钮
Ext.override(Ext.grid.RowEditor,
{
addFieldsForColumn : function(column, initial) {
var me = this, i, length, field;
if (Ext.isArray(column)) {
for (i = 0, length = column.length; i < length; i++) {
me.addFieldsForColumn(column[i], initial);
}
return;
}
if (column.getEditor) {
field = column.getEditor(null, {
xtype : 'displayfield',
getModelData : function() {
return null;
}
});
if (column.align === 'right') {
field.fieldStyle = 'text-align:right';
}
if (column.xtype === 'actioncolumn') {
field.fieldCls += ' ' + Ext.baseCSSPrefix
+ 'form-action-col-field';
}
if (me.isVisible() && me.context) {
if (field.is('displayfield')) {
me.renderColumnData(field, me.context.record,
column);
} else {
field.suspendEvents();
field.setValue(me.context.record
.get(column.dataIndex));
field.resumeEvents();
}
}
if (column.hidden) {
me.onColumnHide(column);
} else if (column.rendered && !initial) {
me.onColumnShow(column);
}
// -- start edit
me.mon(field, 'change', me.onFieldChange, me);
// -- end edit
}
}
});