ExtJSでGridを表示させる

前回はHello, Worldダイアログを表示させましたが、今回はExtJSの肝であるGridを使ってみます。

前回同様にHTMLファイルを作成します。

grid.htmlのソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Grid</title>
    <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
    <script language="javascript" src="grid.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>

9行目では今回使用するgrid.jsを読み込みます。
12行目は表示場所を指定するやり方です。

grid.jsのソース

Ext.onReady(function(){
    
    // データ定義
    var proxy = new Ext.data.MemoryProxy([
        ['7369', 'SMITH', 'CLERK', '7902', '1980/12/17', '800', '', '20'],
        ['7499', 'ALLEN', 'SALESMAN', '7698', '1981/02/20', '1600', '300', '30'],
        ['7521', 'WARD', 'SALESMAN', '7698', '1981/02/22', '1250', '500', '30'],
        ['7566', 'JONES', 'MANAGER', '7839', '1981/04/02', '2975', '', '20'],
        ['7654', 'MARTIN', 'SALESMAN', '7698', '1981/09/28', '1250', '1400', '30']
    ]);
    
    // 読み込み設定
    var reader = new Ext.data.ArrayReader({
        fields: [
            { name:'empno' },
            { name:'ename' },
            { name:'job' },
            { name:'mgr' },
            { name:'hiredate' },
            { name:'sal' },
            { name:'comm' },
            { name:'deptno' }
        ]
    });
    
    // データストア
    var store = new Ext.data.Store({
        proxy: proxy,
        reader: reader
    });
    
    store.load();
    
    // グリッド定義
    var gridPanel = new Ext.grid.GridPanel({
        title: '社員表',
        height: 200,
        width: 550,
        store: store,
        colModel: new Ext.grid.ColumnModel([
            {
                header: '社員番号',
                width: 60,
                sortable: true,
                dataIndex: 'empno'
            },{
                header: '社員名',
                width: 60,
                dataIndex: 'ename'
            },{
                header: '職種',
                width: 80,
                dataIndex: 'job'
            },{
                header: '社員番号（上司）',
                width: 90,
                dataIndex: 'mgr'
            },{
                header: '雇用日',
                width: 70,
                dataIndex: 'hiredate'
            },{
                header: '賃金',
                width: 60,
                dataIndex: 'sal'
            },{
                header: 'コミッション',
                width: 60,
                dataIndex: 'comm'
            },{
                header: '部署番号',
                width: 60,
                dataIndex: 'deptno'
            }
        ])
    });
    
    // 描画
    gridPanel.render('grid');
});

4～10行目でデータを定義します。
今回はMemoryProxy（HTTPでデータを取得する場合にはHttpProxyを使用する）を使用します。
MemoryProxyはメモリーに展開されたデータを代理で処理するオブジェクトです。

13～24行目で読み込むデータの情報を定義します。
ArrayReaderは配列形式で読み込む為のオブジェクトです。
属性なども定義できますが、今回は名前だけ定義しています。

27～30行目で先に定義した proxy と reader を使い、ExtJSで利用出来る形の store にします。

35～76行目でGridの定義をしています。
定義内容は以下の通り。

GridPanelの定義
title	Gridのタイトル
height	Gridの高さ
width	Gridの幅
store	使用するstore
colModel	columnの定義

ColumnModelの定義
header	カラム名
width	カラムの幅
sortable	ソート機能の有無
dataIndex	使用するstoreでの名前（reader定義のname）

reader定義のnameの部分をdataIndexに設定することで、そのカラムにデータが表示されます。

79行目でgrid.htmlの12行目の位置に表示させています。

htmlを開くと以下の様に表示されます。

NET-WALKERS

このブログを検索

ExtJSでGridを表示させる

コメント

コメントを投稿