ExJS入門26 エディタブル・グリッド（色々なエディターを設定する)
エディタブルグリッドのサンプルその3になります。
今回は色々なグリッドを編集する際のエディタにテキストフィールド以外のエディタを指定します。このサンプルではTextField, DateField, NumberField.ComboBoxを使います。
ComboBoxをエディターに設定
グリッドパネル関連の過去の記事はこちらからです。
- ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18 グリッド レンダラーを使ってデザインを変える
- ExtJS入門19 グリッドにページング機能を追加する
- ExtJS入門20 グリッドにフィルタリング機能を追加する
- ExJS入門21 グリッド・セレクション・モデル
- ExJS入門22 グリッドのイベント処理（ダブルクリック、右クリック）
- ExtJS入門23 グリッドへの項目の追加と削除
- ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
- ExJS入門25 エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.ColumnModelクラス
http://extdocs.xenophy.com/?class=Ext.grid.ColumnModel
ExtJS -3.0 日本語APIドキュメント – Ext.form.TextFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.TextField
ExtJS -3.0 日本語APIドキュメント – Ext.form.NumberFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.NumberField
ExtJS -3.0 日本語APIドキュメント – Ext.form.DateFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.DateField
ExtJS -3.0 日本語APIドキュメント – Ext.form.ComboBoxクラス
http://extdocs.xenophy.com/?class=Ext.form.ComboBox
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 エディタブル・グリッドのフィールド</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--Ext JS-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript" src="editorgrid-field.js"></script>
<style TYPE="text/css">
<!--
.add {background-image: url(../img/icon/add.png) !important;}
.delete {background-image: url(../img/icon/delete.png) !important;}
-->
</style>
</head>
<body>
<div style="width:500px;margin:0 auto;padding:15px;background-color:#D3E1F1;font-size:small;">
<p style="font-weight:bold;padding:3px;margin-bottom:10px;">
エディタブル・グリッドで色々なエディタを使用しています。
</p>
<div id="grid"></div>
<br/>
Java Script：<a href="editorgrid-field.js">editorgrid-field.js</a><br/>
</div>
</body>
</html>
Java Script:
Ext.onReady(function()
{
//空のときのレンダラー
var emptyRenderer = function(v) {
return v ? v : 'ダブルクリックして編集';
};
//日付用レンダラー
var dateRenderer = function(v){
if (Ext.isDate(v)){
return v.format('Y/m/d');
}else{
return '日付なし';
}
}
//コンボボックス用のレンダラー
var comboRenderer = function(combo){
//カラムモデルへのレンダラーを返す。
return function(value){
//カラムに渡された値から、DisplayFieldを遡る。
var record = combo.findRecord(combo.valueField,value);
return record ? String.format('{0}({1})',record.get('name'),record.get('furi')) : combo.valueNotFoundText;
}
};
//コンボボックス
var combo = new Ext.form.ComboBox({
emptyText:'日付を入力してください。',
store:new Ext.data.ArrayStore({
data:[
['Javascript','js','ジャバスクリプト'],
['PHP','php','ピーエイチピー'],
['Python','py','パイソン'],
['Ruby','rb','ルビー'],
['Perl','pl','パール']
],
fields:['name','extname','furi']
}),
mode:'local',
editable:false,
triggerAction:'all',
displayField:'name',
valueField:'extname',
valueNotFoundText:'値なし'
});
var grid = new Ext.grid.EditorGridPanel({
renderTo:'grid',
title:'エディタブル・グリッド 色々なエディタ',
height:210,
width:500,
//カラムモデル コンフィグをオブジェクトで渡している
cm:new Ext.grid.ColumnModel({
//デフォルトのカラム設定
defaults:{
editor:{
xtype:'textfield',
emptyText:'入力してください'
},
renderer:emptyRenderer
},
columns:[
{
id:'title',
header:'テキスト',
dataIndex:'title',
width:120
},
{
id:'date',
header:'日付',
dataIndex:'date',
width:80,
editor:{ //xtypeでDateFieldを指定
xtype:'datefield',
emptyText:'日付を入力してください。',
format:'Y/m/d'
},
renderer:dateRenderer
},
{
id:'type',
header:'コンボボックス',
dataIndex:'type',
width:130,
editor:combo,
renderer:comboRenderer(combo)
},
{
id:'value',
header:'ナンバー',
dataIndex:'value',
width:100,
editor:new Ext.form.NumberField({
allowDecimals:false,
allowNegative:false
})
}
]
}),
//セレクションモデル
sm:new Ext.grid.RowSelectionModel({
singleSelect:true
}),
//ストア
store:new Ext.data.JsonStore({
fields:['title','date','type','value']
}),
//GridViewのコンフィグを設定
viewConfig:{
deferEmptyText:false,
emptyText:'グリッド項目はありません',
forceFit:true
},
tbar:[
{
text:'追加',
iconCls:'add',
handler:function(btn){ //グリッドに項目を追加する処理
//編集中の場合は編集をやめる
grid.stopEditing();
var data = {};
var RecordType = grid.getStore().recordType;
var newItem = new RecordType(data);
grid.getStore().insert(0,newItem);
}
},
{
text:'削除',
iconCls:'delete',
handler:function(btn){ //選択したレコードを削除する処理
//編集中の場合は編集をやめる
grid.stopEditing();
//1.選択されている項目を取得
var record = grid.selModel.getSelected();
if (record) {
//2.recordをremoveでストアから取り除く
grid.getStore().remove(record);
}
}
}
]
});
});
実行結果:
DateFieldをエディターに設定
ComboBoxをエディターに設定
エディタのグリッドはカラムモデル(Ext.grid.ColumnModel)クラスで設定します。前回までは絡むモデルの呼び出しの際の引数に配列でカラムの構造を指定してました。今回はオブジェクトで指定しています。オブジェクト指定することでカラムモデルクラスのコンフィグオプションを設定できます。カラムの構造はcolumnsコンフィグに指定します。またdefaultsはデフォルトのカラムの型を設定できます。今回はエディタとレンダラーを設定しています。そのためeditor,rendererを設定していない一つ目のtitleカラムにデフォルトからエディターとレンダラーが設定されることになります。
new Ext.grid.ColumnModel({
//デフォルトのカラム設定
defaults:{
editor:{
xtype:'textfield',
emptyText:'入力してください'
},
renderer:emptyRenderer
},
columns:[
{
id:'title',
header:'テキスト',
dataIndex:'title',
width:120
},
・・・省略・・・
{
id:'value',
header:'ナンバー',
dataIndex:'value',
width:100,
editor:new Ext.form.NumberField({
allowDecimals:false,
allowNegative:false
})
}
]
})
エディタの設定は各カラムのeditor設定で指定します。
new Ext.grid.ColumnModel({
columns:[
{
id:'title',
header:'テキスト',
dataIndex:'title',
width:120
},
{
id:'date',
header:'日付',
dataIndex:'date',
width:80,
editor:{ //xtypeでDateFieldを指定
xtype:'datefield',
emptyText:'日付を入力してください。',
format:'Y/m/d'
},
renderer:dateRenderer
},
{
id:'type',
header:'コンボボックス',
dataIndex:'type',
width:130,
editor:combo,
renderer:comboRenderer(combo)
},
{
id:'value',
header:'ナンバー',
dataIndex:'value',
width:100,
editor:new Ext.form.NumberField({
allowDecimals:false,
allowNegative:false
})
}
]
})
・日付エディター
dateカラムはデートフィールド(Ext.form.DateField)が設定されています。ここではxtypeで指定しています。デートフィールドはデートピッカーが付いた日付に特化したフィールドです。formatでデートピッカーから選んだ日付の表示形式を設定します。グリッドに設定される値はDate型のため、レンダラーでカスタムの日付形式を設定できます。
//日付用レンダラー
var dateRenderer = function(v){
if (Ext.isDate(v)){
return v.format('Y/m/d');
}else{
return '日付なし';
}
}
・数値エディター
valueカラムはナンバーフィールド(Ext.form.NumberField)が設定されています。Ext.from.NumberFieldはxtypeが設定されていないので、newしています。コンフィグにはallowDecimalsとallowNegativeをfalseにして自然数のみを入力させています。
・セレクトボックスエディター
コンボボックスをエディタに設定します。一番手間がかかっています。その理由としてはコンボボックスのvalueFieldとdisplayFieldが同一でない場合にレンダラーで正しくdisplayFieldの値を表示させる処理です。コンボボックスで項目を選択するとvalueFieldで指定した値がグリッドの値として渡されます。そのためコンボボックスのdisplayFieldを設定された値(valueFieldの値)から遡って、取得する必要があります。またrendererで呼ばれる際の引数にエディタへの参照が含まれないため、上手くコンボボックスへアクセスしなければいけません。
ここでは予めコンボボックスをcomboという変数に設定してレンダラーを作成しています。
//コンボボックス用のレンダラー
var comboRenderer = function(combo){
//カラムモデルへのレンダラーを返す。
return function(value){
//カラムに渡された値から、DisplayFieldを遡る。
var record = combo.findRecord(combo.valueField,value);
return record ? String.format('{0}({1})',record.get('name'),record.get('furi')) : combo.valueNotFoundText;
}
};
//コンボボックス
var combo = new Ext.form.ComboBox({
emptyText:'日付を入力してください。',
store:new Ext.data.ArrayStore({
data:[
['Javascript','js','ジャバスクリプト'],
['PHP','php','ピーエイチピー'],
['Python','py','パイソン'],
['Ruby','rb','ルビー'],
['Perl','pl','パール']
],
fields:['name','extname','furi']
}),
mode:'local',
editable:false,
triggerAction:'all',
displayField:'name',
valueField:'extname',
valueNotFoundText:'値なし'
});
レンダラーに設定する関数を出力する関数をcomboRendererで作成します。このcomboRederer関数ににコンボボックスの参照comboを引数として設定しています。そのため、出力された実際のレンダラーの関数はcomboへのアクセスが可能になります。
このレンダラー出力関数をエディターにcombo指定されているカラムに設定することで、コンボボックスのストアの情報を全て使って表示を変更できます。
今回のcomboRenderer関数はエディタブルグリッドにコンボボックスが設定されていて、なおかつコンボボックスのvalueFieldとdiplayFieldに違う値が設定されている際に必要になります。意外と使える機会が多いので、今回のサンプルを覚えておくと良いかもしれません。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExJS入門26 エディタブル・グリッド（色々なエディターを設定する) [...]
ExJS入門30 Twitter Search APIを使ったグリッドパネル | ExtJSで楽しくRIA業務アプリ開発
7 5 月 10 at 11:51 AM