Gridのサンプルをいじってみる
Extのチュートリアルに掲載されていたGridのサンプルを使ってみたのでメモ。
jQueryとドコイクAPIを使ってデータ表示してみました。
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"/>
あとはjQueryのAjax関連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' }); } }); });