【Ext JS】行をドラッグ＆ドロップ可能な表を作る
2008.05.28 Author: Jas
以前にこのブログでも紹介されていたExt.jsですが、なかなか続編が執筆されていないようなので、連載企画を乗っ取ってみました。
ということで、早速、Ext JS(バージョン：2.1)を使った簡単な例を紹介します。
今回のテーマは、「行をドラッグ＆ドロップ可能な表」です。
今回利用したものは、Ext JSで紹介されているサンプルの中の"Editable Grid"というものです。
このサンプルでは、列をドラッグ＆ドロップで移動することは可能ですが、行単位で移動を行うことはできません。
そこで、このサンプルをもとにして、行単位のドラッグ＆ドロップが可能な表を作成します。
まずは、Editable Gridのサンプルページからedit-grid.jsとplants.xmlをダウンロードし、サンプルページと同様のhtmlを用意してください。
htmlは下記のようになります。
Ext JSのパスは適当に書き換えてください。
<html>
<hrad>
<title>Ext Grid Test</title>
<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
<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="/js/ext/source/locale/ext-lang-ja.js"></script>
<script type="text/javascript" src="/js/edit-grid.js"></script>
</head>
<body>
<h1>Sample</h1>
<select name="light" id="light" style="display: none;">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>
<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>
</select>
<div id="editor-grid"></div>
</body>
</html>
ここまでは、サンプルと全く同じです。
次に、edit-grid.jsをエディターで開き、15行目辺りの"shorthand alias"の部分に下記の一行を追加してください。
RowSelectionModel()というのは、行単位の選択を可能にするものです。
// shorthand alias
var fm = Ext.form;
var sm = new Ext.grid.RowSelectionModel(); // この行を追加
そして、EditorGridPanelのオブジェクトを生成する部分(105行目付近)に、ドラッグ＆ドロップを有効にするため、下記の4行を追加をしくてください。
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:600,
height:300,
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
plugins:checkColumn,
clicksToEdit:1,
sm: sm, // 行単位モデル追加
enableDragDrop:true, // ドラッグ＆ドロップ可能に
ddGroup: 'GridDD', // ドラッグ＆ドロップグループ
ddText: '行の移動はドラッグ＆ドロップで行えます', // 行を選択時にでるメッセージ
最後に、ドロップ時に実行する処理を追加します。
Ext.onReadyの末尾(140行目辺り)に下記を追加します。
// ドラッグ＆ドロップ時の処理
var griddd = new Ext.dd.DropTarget(grid.container, {
ddGroup: 'GridDD',
notifyDrop: function(dd, e, data) {
// ドロップされた行のid
var cindex = dd.getDragData(e).rowIndex;
// 選択された行数分処理を繰り返す
for (i = 0; i < data.selections.length; i++) {
// 選択した行のデータをドロップ先に移動
rowData = store.getById(data.selections[i].id);
store.remove(store.getById(data.selections[i].id));
store.insert(cindex, rowData);
}
// 選択の解除
grid.getSelectionModel().clearSelections();
return true;
}
});
これで、行をドラッグ＆ドロップ可能な表の完成です。
簡単に作成できるので、ぜひお試しください。
