RowEditing爲grid進行行級別編輯時使用的插件,與CellEditing插件不同,編輯完一行數據,即需要保存數據。
對於RowEditing的使用官方文檔中有詳細的例子,本文主要解決該插件在使用中出現的一些問題及解決方式。
問題1:
新增數據或者編輯數據時,進入編輯狀態後,如果編輯表單數據有效性爲false時(isValid),保存(update)按鈕爲灰色不可用狀態,即使改變數據使表單數據有效時,該按鈕仍爲不可用。
而官方實例中的代碼中,爲避免出現按鈕不可用,採用新增數據直接賦值的方法:
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: '[email protected]',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
});
該代碼爲新增一條數據,可見其將新增數據設爲符合表單要求數據。
如果將其中一條數據置空,新增數據後如圖1,保存按鈕不可用
圖片1
即使輸入數據,按鈕依然無法可用
圖片2
問題原因:
RowEditing插件使數據進入編輯狀態的方法爲startEdit(record, columnHeader),該方法中其實是使用了Ext的一個內部工具類RowEditor中的startEdit(record, columnHeader)方法.
而該內部工具類的startEdit()方法使用loadRecord()將選中的數據放入form表單中進行編輯。loadRecord()方法中調用updateButton(isValid)對按鈕狀態進行了設置;
所以當進入編輯狀態後,如果需要編輯的數據本身就存在不符合要求的字段,那麼保存按鈕被置爲不可用狀態。即使所有數據都符合要求,按鈕也不可用。
問題解決:
因爲只有在數據進入編輯時對按鈕進行設置,後期的輸入操作沒有類似的操作。
內部工具類RowEditor中的方法onFieldChange()正是應對輸入改變時處理錯誤信息顯示及按鈕設置的(源碼不再羅列,可參考文檔,注:文檔中該方法沒有顯示在方法列表中,需要在js文件中查找)
工具類中的事件:‘fieldvaliditychange’‘validitychange’是對錶單有效性改變時事件,區別爲‘validitychange’針對整個表單而‘fieldvaliditychange’單個編輯框
代碼:
var rowEditor = grid.plugins[0].getEditor();
rowEditor.on('fieldvaliditychange', rowEditor.onFieldChange, rowEditor);
該代碼寫在列表頁創建之後(‘fieldvaliditychange’‘validitychange’均可)。
當編輯的數據有效性發生改變時,會自動設置保存按鈕的可用狀態
圖片3
圖片4
圖片5
注:代碼測試有效,需根據具體情況綁定該事件