ExtJS グリッドに合計行を表示する

Visualforceの開発において、表形式にデータの一覧を表示する要件というは比較的多いと思うが、列のソートや、列のドラッグアンドドロップ、合計行の表示という要件があった場合、

pageBlockTable や dataTable といった標準コンポーネントでは簡単に実現する事が困難なケースは良くある。

そのような場合、自作でゴリゴリJavaScriptを書いて対応する方法もあるが、要件を満たす高機能なグリッドコンポーネントを持つ、JavaScriptライブラリの適用も検討することだろう。

今回ある開発案件で、グリッド表示のフッターに合計行を追加して表示したいとの相談が社内からあり、ExtJSのGridを使ったサンプルを書いてみた。

コードサンプル

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>グリッド合計行の表示テスト</title>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" 
    href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
<script type="text/javascript" 
    src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" 
   src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(function() {
    var data_detali = [
        ['パソコン','3','150000','450000'],
        ['プリンタ','1','50000','50000'],
        ['スキャナー','2','20000','40000'],
        ['マウス','3','1000','3000'],
    ];
    
    var store_detail = new Ext.data.SimpleStore({
        fields: [
                    {name: 'Name'},
                    {name: 'Qty'},
                    {name: 'UnitPrice'},
                    {name: 'Amount'}
        ]
    });
    store_detail.loadData(data_detali);
    
    var grid_details = new Ext.grid.GridPanel({
        store: store_detail,
        columns: [
            {id:'NAME',header: "品名", width: 300, sortable: true, dataIndex: 'Name'},
            {header: "数量", width: 100, sortable: true, dataIndex: 'Qty'},
            {header: "単価", width: 100, sortable: true, dataIndex: 'UnitPrice'},
            {header: "金額", width: 100, sortable: true, dataIndex: 'Amount'},
        ],
        stripeRows: true,
		scrollBar: false,
        height:300,
        width:500,
        title:'グリッド合計行テスト'
    });


    var data_summary = [
        ['','15','','500000'],
    ];
    
    var store_summary = new Ext.data.SimpleStore({
        fields: [
                    {name: 'Name'},
                    {name: 'Qty'},
                    {name: 'UnitPrice'},
                    {name: 'Amount'}
        ]
    });
    store_summary.loadData(data_summary);

    var grid_summary = new Ext.grid.GridPanel({
        store: store_summary,
        columns: [
            {id:'NAME',header: "品名", width: 300, sortable: true, dataIndex: 'Name'},
            {header: "数量", width: 100, sortable: true, dataIndex: 'Qty'},
            {header: "単価", width: 100, sortable: true, dataIndex: 'UnitPrice'},
            {header: "金額", width: 100, sortable: true, dataIndex: 'Amount'},
        ],
        stripeRows: true,
        height:100,
        width:500,
        listeners: {
            bodyscroll:function(scroll_left, scroll_top) {
		        var con = Ext.get(grid_details.getId()).child('*[class*=x-grid3-scroller]');
		        con.scrollTo('left', scroll_left, false);
            }
        }
    });


    grid_details.render(Ext.get('search_results'));
    grid_summary.render(Ext.get('search_sumary'));


    // 明細部のスクロールバー設定
    var scroller = Ext.get(grid_details.getId()).child('*[class*=x-grid3-scroller]');
    scroller.setStyle('overflow', 'hidden');

    // フッター部のヘッダー表示
    var head = Ext.get(grid_summary.getId()).child('*[class*=x-grid3-header]');
    head.setStyle('display', 'none');
})

</script>
</head>
<body>
    <div id="search_results"></div>
    <div id="search_sumary"></div>
</body>
</html>

※ちなみに動作はChromeとFireFoxで試した。

※列の入れ替えへの対応や列の表示・非表示へは未対応。

※実装は単純にグリッドを上下に並べ、水平スクロールを同期を取るという方法。

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28

ExtJS グリッドに合計行を表示する

カテゴリ:

タグ:

トラックバック(0)

コメントする

検索

最近のブログ記事

2010年2月

カテゴリ

ExtJS グリッドに合計行を表示する

カテゴリ:

タグ:

トラックバック(0)

コメントする

検索

最近のブログ記事

2010年2月

カテゴリ

タグクラウド