ExJS入門27 もう一つのエディタブル・グリッド ux.RowEditorプラグイン
Ext.gri.EditorGridクラスは、グリッドを表計算ソフトのように編集できるグリッドです。今回はもう一つのエディターグリッドといえるRowEditorを使ったグリッドのサンプルを紹介します。
ux Grid RowEditor
RowEditorはユーザーエクステンション(ux)です。
ユーザーエクステンションは世界中のExtJS開発者が作成して、ExtJSのフォーラムの等で自身のUXを公開しています。
ExtJS Forum http://www.extjs.com/forum
Ext: User Extensions and Plugins
またUXの情報が集められているhttp://extjs-ux.org/もあります。ここにはUX版のAPIドキュメントをまとめたものもあります(全てのUXを網羅しているわけではありませんが)。
UXはExtJSの基本ライブラリ以外には含まれないので、使いたいUXを見つけた場合は開発者のページ等からJS,CSS,画像等のファイルを入手する必要があります。
今回のRowEditorはextjs-ux.orgには無いようです。ExtJSのサンプルのページのRowEditorのサンプルからダウンロードするか、
以下の作者のサイトからも入手できます。
Using the ExtJS Row Editor
グリッドパネル関連の過去の記事はこちらからです。
- ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18 グリッド レンダラーを使ってデザインを変える
- ExtJS入門19 グリッドにページング機能を追加する
- ExtJS入門20 グリッドにフィルタリング機能を追加する
- ExJS入門21 グリッド・セレクション・モデル
- ExJS入門22 グリッドのイベント処理（ダブルクリック、右クリック）
- ExtJS入門23 グリッドへの項目の追加と削除
- ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
- ExJS入門25 エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)
- ExJS入門26 エディタブル・グリッド（色々なエディターを設定する)
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名古屋勉強会 Row Editor プラグイン</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>
<!--ux (rowedirtorを読み込む)-->
<link rel="stylesheet" type="text/css" href="../js/ux/RowEditor/RowEditor.css" />
<script type="text/javascript" src="../js/ux/RowEditor/RowEditor.js"></script>
<script type="text/javascript" src="roweditorgrid.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;">
UX RowEditorを使ってグリッド項目の編集を行います。
</p>
<div id="grid"></div>
<br/>
Java Script：<a href="roweditorgrid.js">roweditorgrid.js</a><br/>
</div>
</body>
</html>
Java Script:
//Row Editor グリッド
Ext.onReady(function()
{
var editor = new Ext.ux.grid.RowEditor({
saveText:'変更',
cancelText:'キャンセル'
});
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
title:'UX RowEditorをグリッドに設置',
height:210,
width:400,
plugins:[editor],
//カラムモデル
cm:new Ext.grid.ColumnModel([
{
id:'id',
header:'ID',
width:30,
dataIndex:'id'
},
{
id:'name',
header:'ブラウザ名',
dataIndex:'name',
width:100,
editor:new Ext.form.TextField({
allowBlank:false
}),
renderer:function(v){ //カラムのデータが空のとき表示
return v ? v : 'ダブルクリックで編集';
}
},
{
id:'url',
header:'URL',
dataIndex:'url',
width:100,
editor:new Ext.form.TextField(),
renderer:function(v){ //カラムのデータが空のとき表示
return v ? v : 'ダブルクリックで編集';
}
}
]),
//セレクションモデル
sm:new Ext.grid.RowSelectionModel({
singleSelect:true
}),
//ストア
store:new Ext.data.JsonStore({
url:'data.php',//php等が使えない場合はここをdata:'data.json'としてローカルファイルの取得してもよいです。
root:'rows', //実際のデータ位置（プロパティ名）
totalProperty:'total', //全件数を返すプロパティ名を指定
successProperty:'success',
idProperty:'id',
fields:[
{name:'id'},
{name:'name'},
{name:'url'},
],
autoLoad:true //描写後に自動的に初回のリクエストをかける
}),
//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);
}
}
}
]
});
});
<strong>実行結果:</strong>
RowEditor
RowEditorの設置場所は任意でかまいませんが、今回はextとは分けてuxディレクトリを作って、さらにRowEditorディレクトリを作って設置しています。UXはJSだけでなくCSSファイルや画像も含むためです。まれに使用している画像名が同じ場合もあるため個々のUXごとにディレクトリと管理が楽になります。RowEditor.cssの画像の読み先が少し変でしたので、それにあわせて画像の設置位置が換えてあります。CSS自体を書き換えても良いと思います。
RowEditorはグリッドのプラグインとして設定します。グリッドへのプラグインの設置はGridのコンフィグのpluginsに配列で指定します。配列なのは複数のプラグインを登録できるようしているためです。
[code lang="js"]
var editor = new Ext.ux.grid.RowEditor({
saveText:'変更',
cancelText:'キャンセル'
});
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
title:'UX RowEditorをグリッドに設置',
height:210,
width:400,
plugins:[editor],
・・・
});
[/code]
RowEditorのコンフィグオプションはAPIリファレンスが無いためソースから調査しないといけません。いかに大まかなコンフィグオプションをまとめておきます。
実際使う場合に必要なのは設定は特に無いので空のままでもかまいません。サンプルではボタンが日本語化されないので、保存とキャンセルの文字を日本語に変更しています。
RowEditorが呼び出すエディターはエディタブル・グリッドと同様にカラムモデルで指定します。エディタを設定しないカラムは編集できません。
allowBlank等の設定もも使用できます。RowEditorに必要な設定はこれくらいです。UXのファイル正しく設置できれば特に難しくないかもしれません。
またux.RowEditorはExt-3.1だと少し崩れました。ExtJS 3.2ではきちんと動作しました。（昨日3.2.1も公開されていますね。アップデートのペースがかなり早くなっている気がします。）
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExJS入門27 もう一つのエディタブル・グリッド ux.RowEditorプラグイン [...]
ExJS入門28 チェックボックス付きグリッドパネル | ExtJSで楽しくRIA業務アプリ開発
30 4 月 10 at 12:45 PM