Ext.grid.EditorGridで表形式編集_2

Ext.grid.EditorGridを利用して表を表示します。
前準備として、webservicesでjsonデータを出力するができるようにcakePHPを構築しておいてください.

ExtライブラリとjqueryAjaxライブラリを読み込みます。（app/webroot/js/extに置いています） 

<script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"></script>

<script type="text/javascript" src="/js/ext/adapter/jquery/jquery-plugins.js"></script>

<script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script>

<script type="text/javascript" src="/js/ext/ext-all.js"></script>

<script type="text/javascript" src="/js/ext/source/locale/ext-lang-ja.js"></script>

<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css"> 


Ext.grid.EditorGridの表示にはいくつかのクラスを必要とします。

Ext.grid.ColumnModel　：　カラム（列）の設定。列名、幅、表示フォーマットなど。

Ext.form　：　セレクト等の編集コンポーネント

Ext.data.Record.create　：　各レコードのフィールドと対応するデータフィールド、各フィールドのデータ型など。

Ext.data.Store　：　データを保持するオブジェクト。Ajaxで読み込むURLやxml,Jsonの解析設定など。

Ext.Toolbar　：　今回は新規追加や保存するなどのボタンをツールバーに実装します。 



<script type="text/javascript">  
<!--  
//ロード完了後実行（jquery使用）  
$(function() {  
 Ext.QuickTips.init(); 
 //Bool型の表示フォーマット  
 function formatBoolean(value){  
  return value ? '1' : '0';  
 }; 
 var fm = Ext.form; //フォーム部品を使用する  
 var Ed = Ext.grid.GridEditor; //EditorGridを使用する 
 //カラムモデル  
 var cm = new Ext.grid.ColumnModel(  
 [  
  {header: 'ID', width: 32, dataIndex: 'id'},  
  {header: '商品名', width: 160, dataIndex: 'title',  
   editor: new Ed(new fm.TextField({allowBlank: false}))  
  },  
  {header: '備考', width: 120, dataIndex: 'comment',  
   editor: new Ed(new fm.TextField())  
  },  
  {header: 'カテゴリー', width: 120, dataIndex: 'categorye_id',  
   editor: new Ed(new Ext.form.ComboBox({  
      triggerAction: 'all',  
      transform:'categoryes',  
      forceSelection:true,  
    editable      :false,  
    lazyRender:true  
   }))  
  },  
（中略、、、）  
  {header: 'ロット', width: 42, dataIndex: 'minimum',  
   editor: new Ed(new fm.NumberField({  
   allowBlank: false,  
   allowDecimals : false,  
   allowNegative: false  
   }))  
  },  
  {header: '有効', width: 42, dataIndex: 'visible',  
   renderer: formatBoolean,  
   editor: new Ed(new fm.Checkbox())  
  }  
 ]);  
 cm.defaultSortable = true; 
 //レコードモデル  
 var Item = Ext.data.Record.create(  
 [  
  {name: 'id'},  
  {name: 'title', type: 'string'},  
  {name: 'comment', type: 'string'},  
  {name: 'categorye_id', type: 'int'},  
（中略、、、）  
  {name: 'minimum', type: 'int'},  
  {name: 'visible', type: 'bool'}  
 ]) 
 //データストア  
 var ds = new Ext.data.Store({  
  //データストアにAjaxでJSONを読み込む  
  proxy:  new Ext.data.HttpProxy(  
   {url: 'http://（サーバーアドレス）/json/items/index/'}  
  ),  
  reader: new Ext.data.JsonReader(  
   {id: 'id', root: 'Item'}, Item)  
 }); 
 //グリッド  
 var grid = new Ext.grid.EditorGrid(  
  'gridDrow',  
  {ds: ds, cm: cm, enableColLock:false}  
 );  
 grid.render(); //グリッドの描画 
 ds.load(); //データ生成の開始  
});  
//-->  
</script> 
<div style="margin: 0px; padding: 0px; border:1px solid #bbb">  
<div id="gridDrow" style="overflow:hidden;width:800px">  
The grid will be placed here.  
</div>  
</div>  
<br />  
<div id="postinfo" style="background-color: #ffe;"></div> 
<select name="categoryes" id="categoryes" style="display: none;">  
<{html_options options=$categoryelists}>  
</select>