ExtJS中RowEditing插件的一些使用問題及解決方法

    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

    wKioL1cy6tzC3kEUAADIeR5rtng280.png

即使輸入數據,按鈕依然無法可用

圖片2

wKioL1cy6uixRRK1AADTl_-6MVo720.png

問題原因:

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

wKiom1cy6sazXFCqAADXea3v32Q038.png

圖片4

    wKiom1cy6tjB7ldzAAC7PNCOrj4870.png

    圖片5

    wKioL1cy68SBhWb1AAC3e94rJsk499.png

    注:代碼測試有效,需根據具體情況綁定該事件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章