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
 
 }
 
});
 

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