在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
}
}
});