Full Ajax な CRUD アプリケーション　その2

SAStruts ExtJS JSONIC

前回はセットアップを完了させました。今回からいよいよ実装に入っていきます。

画面ファイルの作成

まずはベースとなるindex.htmlを作成します。通常SAStrutsのビューはindex.jspのように.jspファイルを作成しますが今回はFull Ajaxなアプリケーションを目的としていますので.htmlとしました。

index.htmlをajax-app/src/main/webapp/employee/に作成します。employee/ディレクトリは自分で作成します。index.htmlの内容を以下に示します。

index.html
<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>社員管理</title>

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ext/resources/css/xtheme-gray.css" />

<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="employee.css" />

<script type="text/javascript" src="employee.js" charset="UTF-8"></script>

</head>

<body>

<div id="center" style="padding:1em;">

<div id="grid-employee"></div>

</div>


</body>

</html>

index.htmlを作成したら同じディレクトリにemployee.css、employee.jsを作成します。まだ中身は空のままで構いません。

グリッドの作成

実際に表示されるコンポーネント郡はemployee.jsで定義していきます。まずグリッドのソースを下記に示します。storeはデータソース、colModelはカラムを意味しています。

employee.js - グリッド表示
Ext.onReady(function(){

	// MODEL, CONTROL

	var store = new Ext.data.Store({
	});

	// VIEW

	var colModel = new Ext.grid.ColumnModel([
		{header: "Id", width: 75, sortable: true, dataIndex: 'id'},
		{id:'name', header: "氏名", width: 160, sortable: true, dataIndex: 'name'},
		{header: "職種", width: 75, sortable: true, dataIndex: 'jobType'},
		{header: "給与", width: 75, sortable: true, dataIndex: 'salary'},
		{header: "部署", width: 85, sortable: true, dataIndex: 'department'}
	]);

	var grid = new Ext.grid.GridPanel({
		title:'社員管理',
		stripeRows: true,
		autoExpandColumn: 'name',
		height:523,
		width:600,
		store: store,
		colModel: colModel
	});

	// INIT
	
	grid.render('grid-employee');

});

ブラウザからhttp://localhost:8080/ajax-app/employee/index.htmlを開くと以下のように表示されます。

表示が確認出来たら次はツールバーを作成します。ツールバーは画像アイコンも使用しますので、ここでemployee.cssを作成します。

employee.css
.addIcon {
    background-image: url(./img/page_add.png) !important;
}
.editIcon {
    background-image: url(./img/page_edit.png) !important;
}
.deleteIcon {
    background-image: url(./img/page_delete.png) !important;
}
.findIcon {
    background-image: url(./img/page_find.png) !important;
}

employee.cssで使用する画像ファイルを以下に並べます。ダウンロードしてajax-app/src/main/webapp/employee/img/に保存してください。img/ディレクトリは自分で作成します。

page_add.png　page_edit.png　page_delete.png　page_find.png


ツールバーのソースは下記の通りです。ここで定義したtbarをグリッドのプロパティtbarに指定します。

ツールバーのソース
	var addAction = new Ext.Action({
		text: '追加',
		iconCls: 'addIcon'
	});

	var editAction = new Ext.Action({
		text: '編集',
		iconCls: 'editIcon'
	});

	var deleteAction = new Ext.Action({
		text: '削除',
		iconCls: 'deleteIcon'
	});

	var findAction = new Ext.Action({
		text: '検索',
		iconCls: 'findIcon'
	});

	var tbar = [
		addAction,
		'-',
		editAction,
		deleteAction,
		'-',
		findAction
	];
employee.js - ツールバーの追加
Ext.onReady(function(){

	// MODEL, CONTROL

	var store = new Ext.data.Store({
	});

	// VIEW

	var colModel = new Ext.grid.ColumnModel([
		{header: "Id", width: 75, sortable: true, dataIndex: 'id'},
		{id:'name', header: "氏名", width: 160, sortable: true, dataIndex: 'name'},
		{header: "職種", width: 75, sortable: true, dataIndex: 'jobType'},
		{header: "給与", width: 75, sortable: true, dataIndex: 'salary'},
		{header: "部署", width: 85, sortable: true, dataIndex: 'department'}
	]);

	var addAction = new Ext.Action({
		text: '追加',
		iconCls: 'addIcon'
	});

	var editAction = new Ext.Action({
		text: '編集',
		iconCls: 'editIcon'
	});

	var deleteAction = new Ext.Action({
		text: '削除',
		iconCls: 'deleteIcon'
	});

	var findAction = new Ext.Action({
		text: '検索',
		iconCls: 'findIcon'
	});

	var tbar = [
		addAction,
		'-',
		editAction,
		deleteAction,
		'-',
		findAction
	];

	var grid = new Ext.grid.GridPanel({
		title:'社員管理',
		stripeRows: true,
		autoExpandColumn: 'name',
		height:523,
		width:600,
		store: store,
		colModel: colModel,
		tbar: tbar
	});

	// INIT
	
	grid.render('grid-employee');

});

ブラウザをリロードすると以下のように表示されます。

次にページングツールバーを追加します。ExtJSのグリッドは大まかに1000件程度の項目を境に表示のレスポンスが悪くなり実用的ではなくなってしまいます。多くの項目件数を扱えるようにページング機能を追加します。Ext.grid.GridPanelでのページングは非常に簡単に追加する事が出来るようになっています。ページングツールバーのソースを追加したものを以下に示します。


ページングツールバーのソース
	var pageSize = 20;

	var bbar = new Ext.PagingToolbar({
		id: 'pagingToolbar',
		pageSize: pageSize,
		store: store,
		displayInfo: true,
		displayMsg: '社員の一覧 {2} 件中 {0} - {1} 件目',
		emptyMsg: "社員の一覧はありません"
	});
employee.js - ページングツールバー bbar を追加
Ext.onReady(function(){

	// MODEL, CONTROL

	var store = new Ext.data.Store({
	});

	// VIEW

	var colModel = new Ext.grid.ColumnModel([
		{header: "Id", width: 75, sortable: true, dataIndex: 'id'},
		{id:'name', header: "氏名", width: 160, sortable: true, dataIndex: 'name'},
		{header: "職種", width: 75, sortable: true, dataIndex: 'jobType'},
		{header: "給与", width: 75, sortable: true, dataIndex: 'salary'},
		{header: "部署", width: 85, sortable: true, dataIndex: 'department'}
	]);

	var addAction = new Ext.Action({
		text: '追加',
		iconCls: 'addIcon'
	});

	var editAction = new Ext.Action({
		text: '編集',
		iconCls: 'editIcon'
	});

	var deleteAction = new Ext.Action({
		text: '削除',
		iconCls: 'deleteIcon'
	});

	var findAction = new Ext.Action({
		text: '検索',
		iconCls: 'findIcon'
	});

	var tbar = [
		addAction,
		'-',
		editAction,
		deleteAction,
		'-',
		findAction
	];

	var pageSize = 20;

	var bbar = new Ext.PagingToolbar({
		id: 'pagingToolbar',
		pageSize: pageSize,
		store: store,
		displayInfo: true,
		displayMsg: '会社員の一覧 {2} 件中 {0} - {1} 件目',
		emptyMsg: "会社員の一覧はありません"
	});

	var grid = new Ext.grid.GridPanel({
		title:'社員管理',
		stripeRows: true,
		autoExpandColumn: 'name',
		height:523,
		width:600,
		store: store,
		colModel: colModel,
		tbar: tbar,
		bbar: bbar
	});

	// INIT
	
	grid.render('grid-employee');

});

ブラウザをリロードすると以下のように表示されます。

本日はここまでです。次回はデータベースのセットアップと一覧表示機能の実装を掲載予定です。