プログラミングノート

一からものを作ることが好きなエンジニアの開発ブログです。

Gridのサンプルをいじってみる

Extのチュートリアルに掲載されていたGridのサンプルを使ってみたのでメモ。
jQueryドコイクAPIを使ってデータ表示してみました。



Demo


jQueryを使うにはext-base.jsの代わりに、adapter/jquery配下を下記の順番でロードすればよいらしいです。(Ext.js 2.0 beta1 + jQuery の導入)

<script type="text/javascript" src="ext/adapter/jquery/jquery.js"></script>
<script type="text/javascript" src="ext/adapter/jquery/jquery-plugins.js"></script>
<script type="text/javascript" src="ext/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>


あとはjQueryAjax関連APIを使って表示用のデータを作ればOK。
Gridのオプションはまだ詳しく見てないので分かりませんが、お手軽に色々できそうな感じ。

Ext.onReady(function() {

  $.ajax({
    url : "http://api.doko.jp/v1/searchPOI.do",
    data : {
    "key" : "APIキー",
    "format" : "json",
    "lat_jgd" : "35.681199",
    "lon_jgd" : "139.767551"
    },
    dataType : "jsonp",
    success : function(data){

      //表示データ
      var poiData = [];

      var poiReader = new Ext.data.ArrayReader({}, [
        {name: 'name'},
        {name: 'address'},
        {name: 'dist'},
        {name: 'station'}
      ]);  
    
      //Gridカラム
      var poiColumns = [
        {header: '名前', width: 180, sortable: true, dataIndex: 'name'},
        {header: '住所', width: 250, sortable: true, dataIndex: 'address'},
        {header: '距離', width: 50, sortable: true, dataIndex: 'dist'},
        {header: '最寄駅', width: 100, sortable: true, dataIndex: 'station'}
      ];
      
      //データ生成
      $.each(data.results.poi, function(i, item){
        poiData[i] = [
          item.name, 
          item.address.replace(/\s/g, ''), 
          item.distance+'m', 
          item.station
        ];
      });
      $("#content").empty();
      
      //Grid生成
      var grid = new Ext.grid.GridPanel({
        store: new Ext.data.Store({
          data: poiData,
          reader: poiReader
        }),
        columns: poiColumns,
        title: 'ドコイク 東京駅付近',
        width: 600,
        frame: true,
        renderTo: 'content'
      });
    }
  });
});