ExtJS入門23 グリッドへの項目の追加と削除
今回は空っぽのグリッドに対して、新規項目の追加とグリッドの項目の削除を行うサンプルを紹介します。
ローカルのデータを取り扱います。(サーバーサイドのプログラムを使ってグリッドのデータを取得している場合は、サーバー上のデータを削除する必要があります。)
追加と削除
グリッドのデータはストアで管理されています。グリッドは常にストアの状況を把握しています。ストアの情報に変化があった場合は即座にグリッドに反映されます。グリッドへの項目の追加と削除はグリッドのストアへの項目の追加と削除を行っているといえます。
グリッドパネル関連の過去の記事はこちらからです。
- ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18 グリッド レンダラーを使ってデザインを変える
- ExtJS入門19 グリッドにページング機能を追加する
- ExtJS入門20 グリッドにフィルタリング機能を追加する
- ExtJS入門21 グリッド・セレクション・モデル
- ExtJS入門22 グリッドのイベント処理（ダブルクリック、右クリック）
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.data.JsonStoreクラス
http://extdocs.xenophy.com/?class=Ext.data.JsonStore
ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridViewクラス
http://extdocs.xenophy.com/?class=Ext.grid.GridView
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="grid-edit.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="grid-edit.js">grid-edit.js</a><br/>
</div>
</body>
</html>
Java Script:
//グリッドへの追加と削除
Ext.onReady(function()
{
//グリッドパネルの作成 主要な設定は直接コンフィグオプションに入れています。
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
id:'my-grid',
title:'SingleSelectのグリッドパネル 追加と削除が可能',
height:210,
width:400,
//カラムモデル
cm:new Ext.grid.ColumnModel([
{
id:'title',
header:'項目名',
dataIndex:'title',
width:100
}
]),
//セレクションモデル
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){ //グリッドに項目を追加する処理
//1.追加したいデータ
var data = {
title:'新しい項目'
};
//2.ストアのrecordの型を取得
var RecordType = grid.getStore().recordType;
//3.データをrecordの型に入れて新しい項目を作る
var newItem = new RecordType(data);
//4.ストアのinsertもしくはaddメソッドで追加
grid.getStore().insert(0,newItem);
}
},
{
text:'削除',
iconCls:'delete',
handler:function(btn){ //選択したレコードを削除する処理
//1.選択されている項目を取得
var record = grid.selModel.getSelected();
if (record) {
//2.recordをremoveでストアから取り除く
grid.getStore().remove(record);
}
}
},'->',
{
text:'フォームで入力(おまけ)',
iconCls:'add',
handler:function(){ //フォームで入力した項目を追加する
var formPanel = new Ext.form.FormPanel({
border:false,
bodyStyle:{
padding:'15px'
},
items:[
{
name:'title',
xtype:'textfield',
fieldLabel:'新しい項目の名称',
anchor:'100%'
}
]
});
var win = new Ext.Window({
title:'新しい項目の追加',
layout:'fit',
items:[formPanel],
modal:true,
width:300,
height:300,
buttonAlign:'center',
buttons:[
{
text:'閉じる',
handler:function(){
win.close();
}
},
{
text:'追加',
handler:function(){
var values = formPanel.getForm().getValues();
var RecordType = grid.getStore().recordType;
var newItem = new RecordType(values);
grid.getStore().insert(0,newItem);
win.close();
}
}
]
});
win.show();
}
}
]
});
});
実行結果:
空のとき
追加と削除
今回は事前にグリッドのデータを用意する必要はありません。空のグリッドからはじめます。
グリッドが空のときグリッドは基本的に真っ白です。しかしグリッドの見た目を管理しているGridViewのコンフィグを設定することで、項目がない場合にテキストを表示させることができます
GridViewはGridPanelの内部で自動的に生成されます。GridViewはGridPanelのコンフィグオプションのviewにGridViewクラスを設定することができますが、GridPanelのviewConfigコンフィグオプションに直接GridViewのコンフィグを設定することも可能です。
今回はviewConfigオプションでGridViewの設定を指定しています。
//GridViewのコンフィグを設定
viewConfig:{
deferEmptyText:false,
emptyText:'グリッド項目はありません',
forceFit:true
}
GridViewのコンフィグについてはAPIリファセンスを確認指定ください。ここでは今回使うものだけを簡単に紹介します。
emptyText:グリッドが空のとき表示させるテキスト
deferEmptyText:booleanで指定。ストアがロードされるまでemptyTextの表示を待つかどうか
forceFit:booleanで指定。カラムの幅を自動的にグリッドいっぱいに広がるように自動的に調整する。
今回はそもそも初期データがないのでdeferEmptyTextをfalseにして、ロードまで待たないようにしています。
これでグリッドパネルの準備ができました。早速グリッドへの追加のための処理を考えます。
・追加
グリッドへの追加はtbarの「追加」ボタンから起動するようにします。tbarボタンの設定は以前の記事を参考にしてください。tbarが押された後に実際の追加の処理をhandlerの中で記述していきます。
ステップとしては4段階あります。
tbar:[
{
text:'追加',
iconCls:'add',
handler:function(btn){ //グリッドに項目を追加する処理
//1.追加したいデータ
var data = {
title:'新しい項目'
};
//2.ストアのrecordの型を取得
var RecordType = grid.getStore().recordType;
//3.データをrecordの型に入れて新しい項目を作る
var newItem = new RecordType(data);
//4.ストアのinsertもしくはaddメソッドで追加
grid.getStore().insert(0,newItem);
}
},
ここではあまり実用的ではありませんが、固定したデータをボタンが押されるごとに追加させます。まず追加するデータを用意します(Step 1)。
次に用意したデータをストアに追加するには、ストアのrecordの型にデータをあわせる必要があります。そのためrecordのコンストラクタをストアのrecordTypeから取得します(Step 2)。このrecordTypeに用意したデータを当てはめてストアに合った新しいrecordを作成します。(Step 3)
recordが生成されたなら、あとは実際にストアに追加します。追加のためのメソッドにはaddメソッドとinsertメソッドがあります。addメソッドはストオの最後に追加し、insertメソッドはストアのデータの指定したindexに挿入します。ここではinsertを使いindexを0に指定することで、ストアのデータの先頭に追加しています。(Step 4)
これでストアに新しい項目が追加されました。ストアに追加されると即座にグリッドが再描画されて最新のストアの無いようにもとづいたグリッドの項目が表示されます。
・削除
グリッドからの項目の削除は追加に比べると簡単です。ストアの中から指定したrecordを取り除くことでグリッドから項目が削除されます。削除もtbarのボタンから呼び出すため、指定したrecordは現在選択中の項目にすることにします。また今回は紹介しませんが、前回紹介したコンテクストメニューを使うとより、ローカルアプリのような操作感で削除を行えます。
tbar:[
{
text:'削除',
iconCls:'delete',
handler:function(btn){ //選択したレコードを削除する処理
//1.選択されている項目を取得
var record = grid.selModel.getSelected();
if (record) {
//2.recordをremoveでストアから取り除く
grid.getStore().remove(record);
}
}
}
まず現在選択中の項目をrecordで取得します。次にrecordをストアから削除します。ストアからの削除はremoveメソッドを使います。引数に対象のrecordを渡すとストアから削除されます。removeが行われるとすぐにグリッドに反映され対象のグリッド項目が取り除かれます。
このようにグリッドへの項目の追加と削除はストアにrecordを追加・削除することになります。storeとrecordが呼び出せる場所からであればどこからでも実行することができます。
ここでサンプルでは固定したデータを追加するだけでしたが、サンプルのコードにはポップアップで入力フォームを呼び出して、そのフォームからrecordを作って追加する処理もおまけで載せておきました。Ext.WindowやExt.form.FormPanelなどがいきなり出てきていますが、これらのクラスの解説はまたの機会に紹介します。APIリファセンスを見て考えてみるとリファレンスを読む練習になるかもしれません。ExtJS名古屋勉強会では時間があれば解説します。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExtJS入門23 グリッドへの項目の追加と削除 [...]
ExtJS入門 ExtJSのフォームについて（基本編） | ExtJSで楽しくRIA業務アプリ開発
22 4 月 10 at 12:20 PM
[...] ExtJS入門23 グリッドへの項目の追加と削除 [...]
ExtJSで楽しくRIA業務アプリ開発 ExJS入門25 エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存) | ExtJSで楽しくRIA業務アプリ開発
26 4 月 10 at 12:59 PM
[...] ExtJS入門23 グリッドへの項目の追加と削除 [...]
ExJS入門27 もう一つのエディタブル・グリッド ux.RowEditorプラグイン | ExtJSで楽しくRIA業務アプリ開発
30 4 月 10 at 10:28 AM
[...] ExtJS入門23 グリッドへの項目の追加と削除 [...]
ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む | ExtJSで楽しくRIA業務アプリ開発
6 5 月 10 at 1:45 PM
[...] ExtJS入門23 グリッドへの項目の追加と削除 [...]
ExJS入門30 Twitter Search APIを使ったグリッドパネル | ExtJSで楽しくRIA業務アプリ開発
7 5 月 10 at 11:51 AM