ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
今回はエディタブル・グリッド(エディター・グリッド)の紹介です。エディタブルとエディターはどっちの方が正しいのかわかりませんが。クラス名はエディター･グリッドなのですが、ここではエディタブル・グリッドで統一します。
エディタブル・グリッドはグリッドの内容をグリッド上で直接編集する機能です。一般的にはカラムのダブルクリックで編集することが多いと思います。今回は以前紹介したグリッドへの追加と削除をベースにエディタブル・グリッドに変更します。
エディタブル･グリッド
ExtJS フォームの基本とExtJS入門23を先にご覧下さい。
グリッドパネル関連の過去の記事はこちらからです。
- ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18 グリッド レンダラーを使ってデザインを変える
- ExtJS入門19 グリッドにページング機能を追加する
- ExtJS入門20 グリッドにフィルタリング機能を追加する
- ExJS入門21 グリッド・セレクション・モデル
- ExJS入門22 グリッドのイベント処理（ダブルクリック、右クリック）
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.EditorGridPanelクラス
http://extdocs.xenophy.com/?class=Ext.grid.EditorGridPanel
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-basic.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-basic.js">editorgrid-basic.js</a><br/>
</div>
</body>
</html>
Java Script:
//グリッドへの追加削除
Ext.onReady(function()
{
var grid = new Ext.grid.EditorGridPanel({
renderTo:'grid',
title:'エディタブル・グリッド 追加と削除が可能',
height:210,
width:400,
//カラムモデル
cm:new Ext.grid.ColumnModel([
{
id:'title',
header:'項目名',
dataIndex:'title',
width:100,
editor:{ //カラムのエディタを指定
xtype:'textfield',
emptyText:'入力してください。'
},
renderer:function(v){ //カラムのデータが空のとき表示
return v ? v : 'ダブルクリックで編集';
}
}
]),
//セレクションモデル
sm:new Ext.grid.RowSelectionModel({
singleSelect:true
}),
//ストア
store:new Ext.data.JsonStore({
fields:['title']
}),
//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);
}
}
}
]
});
});
実行結果:
エディタブル･グリッド
基本的にはExtJS入門23 グリッドへの項目の追加と削除を基本にエディタブル・グリッドに変更します。
Ext.grid.EditorGridクラスはExt.grid.GridPanelクラスのサブクラスであり、ほとんどのグリッドパネルの基本的なコンフィグがエディタブルグリッドに適応できます。そのため今回もExtJS入門23のグリッドパネルのコンフィグがほぼそのまま使えます。
変更箇所はクラスをExt.grid.GridPanelからExt.grid.EditorGridPanelといくつかの編集のカラムの設定になります。
クラスの変更は単純に書き換えるだけです。
つぎに編集時のエディタを設定します。前回のフォームの基本を踏まえて、今回はtextfieldで編集させます。もちろんDateFieldなどより高機能なエディタも設定できます。
//カラムモデル
cm:new Ext.grid.ColumnModel([
{
id:'title',
header:'項目名',
dataIndex:'title',
width:100,
editor:{ //カラムのエディタを指定
xtype:'textfield',
emptyText:'入力してください。'
},
renderer:function(v){ //カラムのデータが空のとき表示
return v ? v : 'ダブルクリックで編集';
}
}
])
さらにここではrendererで空の状態でのグリッドの表示を設定しています。エディタに設定されているemptyTextはエディタが起動しているときだけしか表示されません。セルが空の場合に任意にテキストを表示したい場合は、サンプルのようにカラムのレンダラーで設定します。
またエディタを起動中に項目の追加・削除を行った場合少し気持ち悪い挙動をします。それはエディタが起動中にも関わらず、別の場所からストアが変更されているためです。これを避けるには、別の場所で編集が始まったらグリッドパネルの編集をとめる必要があります。編集をとめるにはEditorGridPanelクラスのstopEditiong()メソッドを実行します。tbarのボタンのハンドラー内で実行しています。
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);
}
}
]
グリッドからエディタブル・グリッドへの変更はこれだけで終了です。グリッドさえ分かっていれば簡単ですね。エディットされた内容はストアに保存されています。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
