跟我一起學extjs5(18--模組的新增、修改、刪除操作)

跟我一起學extjs5(18--模組的新增、修改、刪除操作)
跟我一起學extjs5(18--模組的新增、修改、刪除操作)
上節在Grid展示時做了一個金額單位可以手工選擇的功能，如果你要加入其他功能，也只要按照這個模式來操作就行了，比如說你想改變金額欄位的顏色、小數位元、零值是否顯示、貨幣符號、單位顯示在標題列或者跟在金額後面，凡是你能想到的需要手工設定的東西都可以加進來。 上面講到的這些設定以後會加到程式裡，在下載包裡可以看到，就不做講解了。
這一節來使模組可以具有新增、修改、刪除的操作。由於還沒有和後台服務相聯，因此資料是儲存在本地localStorage中的，瀏覽器關閉這些資料並不會丟失。首先我們讓Grid具有行內修改功能，雙擊單元格可以對其進行修改。在Grid.js中的initComponent函數中加入以下語句使Grid可以雙擊修改資料。clicksToEdit 如果設定成1,則會是單擊修改。

this.cellEditing = new Ext.grid.plugin.CellEditing({clicksToEdit : 2});this.plugins = [this.cellEditing];

如上設定後，雙擊單元格修改介面如下：



在Store的屬性裡加入:autoSync : true,這樣修改完一個單元格後會自動儲存資料。 下面對新增按鈕的事件加以修改，使其可以新增一個記錄。將ModuleController.js中的addRecord函數改為以下：

addRecord : function() {var grid = this.getView().down('modulegrid');var model = Ext.create(grid.getStore().model);model.set('tf_id',0);        grid.getStore().insert(0, model);}

下面來加入資料的刪除，刪除可以選擇一條，也可以選擇多條進行刪除。GridToolbar.js中給刪除按鈕加上事件。

 {text : '刪除',disabled : true,glyph : 0xf014,itemId : 'deletebutton',handler : 'deleteRecords'}

刪除按鈕初始狀態是disabled的，在選中了記錄之後才會變成enable，需要在Grid中加入一個事件：

listeners : {selectionChange : 'selectionChange'},

在ModuleController.js中加入事件響應函數：

// 選中的記錄發生變化過後的事件selectionChange : function(model, selected, eOpts) {// 設定刪除按鈕的狀態this.getView().down('toolbar button#deletebutton')[selected.length > 0? 'enable': 'disable']();},

在ModuleController.js中加入刪除事件的處理函數：

// 刪除一條或多條記錄deleteRecords : function(button) {var grid = this.getView().down('modulegrid'), selection = grid.getSelectionModel().getSelection(), message = '';if (selection.length == 1) // 如果只選擇了一條message = ' 『' + selection[0].getNameValue() + '』 嗎?';else { // 選擇了多條記錄message = '
 

  ';Ext.Array.each(grid.getSelectionModel().getSelection(), function(record) {message += '
  
' + record.getNameValue() + '
';});message += '
 
';message = '以下 ' + selection.length + ' 條記錄嗎?' + message;}Ext.MessageBox.confirm('確定刪除', '確定要刪除 '+ this.getView().getViewModel().get('tf_title')+ ' 中的' + message, function(btn) {if (btn == 'yes') {grid.getStore().remove(grid.getSelectionModel().getSelection());grid.getStore().sync();}})},

為了能夠多選記錄，需要給Grid加上一個屬性 multiSelect : true, 這樣就可以按住Ctrl 和 shift 鍵來用滑鼠進行多選記錄的操作了。下面看看選擇了一條記錄和多條記錄刪除前的提示資訊。 刪除一條的提示資訊：

刪除多條的提示資訊：