1. 程式人生 > >ExtJS4.2學習基於表格的擴充套件外掛---rowEditing

ExtJS4.2學習基於表格的擴充套件外掛---rowEditing

http://blog.csdn.net/z1101385391/article/details/24492247

<strong>比較趕時髦,用了Extjs4.2,今天遇到一個問題,搞了好久。終於找到原因,用RowEditing編輯
新增girdPanel的行時,遇到儲存按鈕變灰的情況,添加了值,寫上值,也無效。在官網的帖子
中找到如下程式碼,重寫RowEditor即可。把下面程式碼複製到你的程式碼中,可以解決該問題。</strong>

http://shuyangyang.blog.51cto.com/1685768/1341477


前一章說了EditorGrid可編輯表格

,但是有點不方便,如果資料多的話,一次性儲存未免有點不太方便。下面我們來說一個擴充套件外掛rowEditing網上許多說了不全,比如將修改的內容提交到後臺的方法8986121fb0680ba1ccc4a1c373eec1ee.jpg

首先,建立擴充套件外掛方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var  rowEditing = Ext.create( 'Ext.grid.plugin.RowEditing' , {          saveBtnText:  '儲存'         
cancelBtnText:  "取消"          autoCancel:  false          clicksToMoveEditor: 1,  //雙擊進行修改  1-單擊   2-雙擊    0-可取消雙擊/單擊事件          autoCancel:  false ,          listeners:{              edit: function (e){                  /*var myMask = new Ext.LoadMask(Ext.getBody(), {                                 msg: '正在修改,請稍後...',                                 removeMask: true     //完成後移除                   });                  myMask.show();*/                  console.info(e.context.record);                  //e.context.record為更改的這行的資料,某個值可以用get方法,比如下面                  var  id = e.context.record.get( 'id' );  //比如修改了id,在這裡就可以獲取id                  //e.context.record.fields.items為修改的這行欄位名,這是一個數組集合,e.context.record.fields.items[0].name為第一列的名稱,以此類推                  // 更新提示介面(供除錯使用)                  Ext.Msg.alert( '您成功修改資訊' "修改的內容是:"  + e.context.record +  "n 修改的欄位是:" + e.context.record.fields.items[0].name + "n 修改的id為" +id); //取得更新內容              }              //當然這裡你也可以自定義一個ajax來提交到後臺,大家自由發揮,這裡不多寫。          }      });

grid中呼叫外掛:

1 2 3 4 5 6 7 8 9 var  grid =  new  Ext.grid.GridPanel({          title: '表格的擴充套件外掛--行編輯' ,          width: 500,          height: 400,          renderTo:  'grid' ,          store: store,          columns: columns,          plugins: [rowEditing]      });

這裡注意下,提交到後臺的引數裡e.context.record和e.context.record.fields方法比較重要,
e.context.record為更改的這行的資料,獲某個值可以用get方法
e.context.record.fields.items為修改的這行欄位名,這是一個數組集合,e.context.record.fields.items[0].name為第一列的名稱,以此類推。