ExtJS-Grid動態表單欄位

曾經實作EXTJS Grid表單的時候碰到一個需求:
想透過一個頁面來實作資料庫內資料修改與新增功能，
此時碰到一個問題，資料表欄位並不是都一樣，
但是基本功能需求都一樣，實在沒理由分多個頁面寫。

後來不斷找資料的情況下，才終於有了解決方法。
原來，ExtJS的Grid亦可做到動態欄位的表單，
底下為主要的程式片段:

 var conn = new Ext.data.Connection();

 conn.request({

  url : url,

  callback : function(options, success, response) {

   var json = new Ext.util.JSON.decode(response.responseText);

   var cm = new Ext.grid.ColumnModel(json.columModle);

   var ds = new Ext.data.JsonStore({

  data : json.data,

  fields : json.fieldsNames,

  pruneModifiedRecords : true

   });

   其他程式片段

 }

})

透過以上短短幾行程式，即可完整實作出我所要的功能需求，
不過上述僅能顯示，如果要能讓Grid編輯的話還需要在其他程式碼片段加入:

var row = cm.getColumnCount();   

for (var i = 1; i < row - 1; i++) {

 cm.setEditable(i, true);

 cm.setEditor(i, "輸入的資料類型");

}

這樣即可實作出一個統一的插入新增頁面
而如果要重新整理、新增、刪除後更新頁面資料
僅需要再每個處理event中加入底下程式碼:

Ext.Ajax.request({

  url : "url",

  success : function(response) {

  json = new Ext.util.JSON.decode(response.responseText);

  cm = new Ext.grid.ColumnModel(json.columModle);

  ds = new Ext.data.JsonStore({

  data : json.data,

  fields : json.fieldsNames


  var row = cm.getColumnCount();

  for (var i = 1; i < row - 1; i++) {

       cm.setEditable(i, true);

       cm.setEditor(i,new Ext.form.NumberField);

  }

  grid.reconfigure(ds, cm); //記得要reconfigure

 }

});

透過上面的程式碼，一個支援多個資料表具有新增、刪除、儲存與重新整理的頁面就大功告成了。