ExJS入門21　グリッド・セレクション・モデル

4件のコメントがあります

グリッド関連4回目は、セレクションモデルを設定して、行の選択状態を取得する簡単なサンプルです。
ExtJSのグリッドの様々なセレクションモデルを設定して、行の選択の仕方を指定します。今回は一番基本となる、単一の行を選択するセレクションモデルを設定して、その行の情報を取り出すようにします。以前に紹介したグリッドのサンプルではセレクションモデルが明示的に設定されていないためグリッドのデフォルトのセレクションモデルが自動的に設定されていました。実際に試してもらうと分かりやすいのですが、Ctrlもしくはcommandキーを押しながらクリックすると複数選択ができます。
今回のサンプルではセレクションモデルを独自に設定して、一行だけを選択するようにします。

セレクションモデル

グリッドパネルについてはこちらもご覧下さい。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.RowSelectionModelクラス
http://extdocs.xenophy.com/?class=Ext.grid.RowSelectionModel

PHP:


<?php
    $limit = $_POST['limit'];
    $start = $_POST['start'];

    $name = $_POST['name'];

    //全データ
    $data = array(
        array(
            'id'=>1,
            'rank'=>1,
            'name'=>'IE',
            'percentage'=>62.69,
            'url' => 'http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx',
            'img' => '../img/ie64.png'
        ),
        array(
            'id'=>2,
            'rank'=>2,
            'name'=>'Firefox',
            'percentage'=>24.61,
            'url' =>'http://mozilla.jp/firefox/',
            'img' => '../img/firefox64.png'
        ),
        array(
            'id'=>3,
            'rank'=>3,
            'name'=>'Chrome',
            'percentage'=>4.63,
            'url' => 'www.google.com/chrome/',
            'img' => '../img/chrome64.png'
        ),
        array(
            'id'=>4,
            'rank'=>4,
            'name'=>'Safari',
            'percentage'=>4.46,
            'url'=> 'http://www.apple.com/jp/safari/',
            'img' => '../img/safari64.png'
        ),
        array(
            'id'=>5,
            'rank'=>5,
            'name'=>'Opera',
            'percentage'=>2.40,
            'url' => 'http://jp.opera.com/',
            'img' => '../img/opera64.png'
        ),
        array(
            'id'=>6,
            'rank'=>6,
            'name'=>'Opera Mini',
            'percentage'=>0.53,
            'url' => 'http://jp.opera.com/',
            'img' => '../img/opera64.png'
        )
    );

    if ($name) {
        $newData = array();
        foreach($data as $val){
            if(stristr($val['name'],$name)) {
                $newData[] = $val;
            }
        }
        $data = $newData;
    }

    if ($limit && $start + $limit <= count($data)) {
        //ページング用
        $rows = array_slice($data,$start,$limit);
    }else {
        //ページングしない
        $rows = $data;
    }

    $res = array(
        'success' => true,
        'total' => 6,
        'rows' => $rows
    );

    header("Content-Type: text/javascript; charset=utf-8");
    echo json_encode($res);

    die();

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名古屋勉強会　Selection</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-selection.js"></script>
    <style TYPE="text/css">
    <!--
        .tick {background-image: url(../img/icon/tick.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-selection.js">grid-selection.js</a><br/>
        PHP(JSONデータ)：<a href="data.php">data.php</a><br />
    </div>
</body>
</html>

Java Script:


//フィルターグリッド
Ext.onReady(function()
{
    //1.データを用意
    //今回はPHPでdata.phpでJSONを返しています。

    //2.データストアを用意
    var store = new Ext.data.JsonStore({
        url:'data.php',
        root:'rows',            //実際のデータ位置（プロパティ名）
        totalProperty:'total',  //全件数を返すプロパティ名を指定
        fields:[
            {name:'id'},
            {name:'rank'},
            {name:'name'},
            {name:'percentage',type:'float'},
            {name:'url',type:'url'},
            {name:'img',type:'url'},
        ],
        autoLoad:true           //描写後に自動的に初回のリクエストをかける
    });

    //3.SelModelの設定
    //今回は一度に一つの行しか選択できないようにしている。
    var sm = new Ext.grid.RowSelectionModel({
        singleSelect:true
    });

    //4.カラムモデルを用意
    var column = new Ext.grid.ColumnModel([
        {
            id:'rank',
            header:'順位',
            dataIndex:'rank',
            width:50
        },
        {
            id:'name',
            header:'ブラウザ名',
            dataIndex:'name',
            width:100
        },
        {
            id:'percentage',
            header:'シェア',
            dataIndex:'percentage',
            width:80
        },
        {
            id:'id',
            header:'ID',
            dataIndex:'id',
            width:20
        }
    ]);

    //5.グリッドパネルの作成
    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        id:'my-grid',
        autoExpandColumn:'name',
        title:'SingleSelectのグリッドパネル',
        height:210,
        width:400,
        cm:column,
        sm:sm,
        store:store,
        tbar:[
            {
                text:'選択中のブラウザ情報',
                iconCls:'tick',
                handler:function(btn){
                    var record = grid.selModel.getSelected();
                    var msg;
                    if (!record) {
                        msg = 'ブラウザが選択されていません';
                    }else{
                        msg = new Ext.XTemplate(
                            '<div style="width:200px; text-align:center;">',
                            'ブラウザ名：{name}<br/>',
                            '順位：{rank}<br/>',
                            'シェア：{percentage}%<br />',
                            '<a href="{url}" target="_blank">DOWNLOAD</a><br/>',
                            '<img src="{img}" />',
                            '</div>').apply(record.data);
                    }

                    Ext.Msg.alert('選択中のブラウザ',msg);
                }
            }
        ]
    });
});

実行結果:

セレクションモデル

今回はRowSelectionModelクラスを使っています。RowSelectionModelクラスのコンフィグオプションのsingleSelectをTrueに設定するだけで、グリッドの一行のみを選択するようになります。これをGridPanelのselModelコンフィグに設定します。コンフィグsmはselModelの省略形です。

次に選択した行のデータの取り出しです。選択した行の状態を把握しているのは対象のグリッドに設定されているセレクションモデルになります。選択行の情報の取出しにはまずセレクションモデルを取得します。またRowSelectionModelではgetSelected()メソッドで選択行のレコードが取得できるため以下のようになります。


var record = grid.selModel.getSelected();

これで選択行のレコードが取得できました。recordはストアにある全データの中の1組データのまとまりです。storeクラスのfieldsで設定したデータの1組を保持しています。今回は単純にデータを取り出すだけですので,record.dataと直接データを取得しています。
詳しくはExt.data.Recordクラスを参照してください。recordについてはEditorGridのサンプルの際に詳しく説明します。

これで1行を選択することができ、選択された一行のデータの取得方法が分かりました。今回はこの選択行の取得をtbarに設置したボタンで起動します。

GridPanelのtbarにはボタンやフィールドなどが置かれます。前回のフィルタリングではテキストフィールドをせっちしました。ここではボタンを設置して選択行の情報をポップアップで開くようにします。
tbarの基本的な設定は以下のようになります。iconClsはボタンにアイコンを設定します。iconClsはCSSのスタイルで指定します。今回はHTMLの中に記述しています。
handlerに処理を記述します。ボタンが押された後にここでグリッドの情報を取得してアラートを表示します。


 tbar:[
	{
		text:'ボタンの表示名',
		iconCls:'tick',
		handler:function(btn){
			//ボタンの処理
		}
	}
]

グリッドパネルのセレクションモデルには様々な選択方式があります。色々と試してみるとよいかもしれません。

こちらもどうぞ

佐竹裕行

1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。

Written by 佐竹裕行

4 月 16th, 2010 at 11:45 am

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料

Tagged with Ext.XTemplate, ExtJS, grid, GridPanel, JavaScript, JSON, JsonStore, php, Store, Tips, サンプル, チュートリアル, ビジネスExtJS, 業務ウェブアプリケーションTips

4 Responses to 'ExJS入門21　グリッド・セレクション・モデル'

Subscribe to comments with RSS or TrackBack to 'ExJS入門21　グリッド・セレクション・モデル'.

[...] サンプルは前回のExJS入門21　グリッド・セレクション・モデルをベースにイベントの処理を追加しています。 [...]

ExJS入門22　グリッドのイベント処理（ダブルクリック、右クリック） | ExtJSで楽しくRIA業務アプリ開発

19 4 月 10 at 12:19 PM
[...] ExJS入門21　グリッド・セレクション・モデル [...]

ExJS入門26　エディタブル・グリッド（色々なエディターを設定する) | ExtJSで楽しくRIA業務アプリ開発

27 4 月 10 at 12:43 PM
[...] ExJS入門28　チェックボックス付きグリッドパネル 4 月 30th, 2010 @ 12:41 pm › 佐竹裕行 ↓ Leave a comment そろそろグリッドに関してもネタがなくなってきましたが、今回はグリッドにチェックボックスを追加するサンプルを紹介します。今回はExJS入門21　グリッド・セレクション・モデルのサンプルコードを使って、チェックボックス付きグリッドに変更します。チェックボックスつきグリッドパネル [...]

ExJS入門28　チェックボックス付きグリッドパネル | ExtJSで楽しくRIA業務アプリ開発

30 4 月 10 at 12:42 PM
[...] ExJS入門21　グリッド・セレクション・モデル [...]

ExJS入門30　Twitter Search APIを使ったグリッドパネル | ExtJSで楽しくRIA業務アプリ開発

7 5 月 10 at 11:51 AM

ExtJSで楽しくRIA業務アプリ開発