タグ ‘JSON’ 一覧
ExtJS入門 Ext.XTemplateの補足
Ext.XTemplateの補足というか真髄の機能にテンプレート内でforやifによる制御ができる点です。
Ext.XTempalteでは、テンプレートにセットするデータの値によって処理を分岐したり、配列の値をループで取り出すことができます。
サンプルではダミーのデータ(data)をオブジェクトで用意して、その内容に対してテンプレート側で制御をしながらHTMLを構築しています。
[ExtJS事例紹介]ウェディングステージグレイセル
今回は弊社で作成したExtJSを活用したサイトの紹介です。
Wedding Stage GRACEL(ウエディングステージ グレイセル)は、愛知県の北東部に位置する総合結婚式場です。
今回サイトをリニューアルするにあたり管理画面をExtJSのViewportアプリで構築し、トップページやギャラリーなどではExt Coreを活用しています。
サイトはこちらになります。
Wedding Stage Gracel – 瀬戸、尾張旭、長久手エリアの結婚式場ならウェディングステージ グレイセル
ExtJS入門17 グリッド・パネル 基本編
いよいよグリッド・パネルをサンプルをやっていこうと思います。
まず基本として、ごくシンプルなグリッドパネルを作成します。
グリッド関連APIリファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridPanel
http://extdocs.xenophy.com/?class=Ext.grid.GridPanel
ExtJS -3.0 日本語APIドキュメント – Ext.data.JsonStore
http://extdocs.xenophy.com/?class=Ext.data.JsonStore
ExtJS -3.0 日本語APIドキュメント – Ext.grid.ColumnModel
http://extdocs.xenophy.com/?class=Ext.grid.ColumnModel
グリッドパネルについて
グリッドパネルはスプレッドシートのような表を作るウィジェットで様々なデータを一覧表示させるのに便利です。ExtJSではExt.grid.GridPanelやExt.grid.EditorGridなどが用意されており、高機能なグリッドを作成することができます。
グリッドパネルの作るために必要な要素はデータソースと表示列(カラム)の設定です。
データソースはExtJSではストア(store)と呼ばれます。ストアはJSONやXML等のデータをExtJS内で保持するためのかたちです。
ストアに渡すデータはローカル変数でもリモートのAPIでも構いません。JsonStoreやXmlStoreを使えば簡単にJSON形式、XML形式のデータをストア格納できます。
表示列の設定は、ストアに格納しているデータをどのようなカラムでグリッドに表示するかを設定します。Ext.grid.ColumnModelクラスを使います。
簡単なグリッドであれば以上の2つをグリッドクラスのコンフィグに設定するだけで、あとはGridクラスがすべてやってくれます。
早速サンプルを紹介します。
ExtJS入門16 ListViewの使い方
DataViewと同じストアを簡易に表示させるクラスに、Ext.ListViewがあります。DataViewでは項目に対してHTMLのテンプレートを用意してストアの内容を表示させていましたが、ListViewでは簡易のグリッドのようにリスト項目を並べてくれます。
Ext.ListView
ExtJS -3.0 日本語APIドキュメント – Ext.ListView
http://extdocs.xenophy.com/?class=Ext.ListView
Ext.DataViewの使い方はこちらから
ExtJS入門15 DataViewの使い方
・PHP
<?php
$row = array();
for ($i = 0; $i < 10; $i++){
$row[$i] = array(
'title' => 'データ' . $i,
'datetime' => date('Y/m/d H:i:s')
);
}
$arr = array(
'total' => $i,
'row' => $row,
'success' => true
);
header("Content-Type: text/javascript; charset=utf-8");
echo json_encode($arr);
die();
?>
今回はJsonStoreへのデータは動的にPHPから提供するようにします。ここでは単純にtitleと時刻を生成してJSONで出力しています。
・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名古屋勉強会 ListViewの使い方</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="listview.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
HTMLは基本的にいつもと同じですね。
・JS
Ext.onReady(function(){
//ストアを用意する
var store = new Ext.data.JsonStore({
url:'listview.php',
totleProperty:'total',
root:'row',
autoLoad:true,
fields:['title','datetime']
});
new Ext.Panel({
renderTo:Ext.getBody(),
id:'myPanel',
title:'ListViewでStoreの内容を表示する',
items:{
xtype:'listview',
store: store,
autoHeight:true,
emptyText: 'No images to display',
reserveScrollOffset: true,
columns: [{
header: '項目',
width: .5,
dataIndex: 'title'
},{
header: '日付',
width: .5,
dataIndex: 'datetime',
}]
},
//ボタン設定
buttonAlign:'center',
buttons:[
{
text:'更新',
handler:function(){
store.reload();
}
}
]
});
});
・実行結果
Ext.ListViewのxtypeはlistviewです。戻り値はBoxComponentですので親にパネルを設定して、そのitemsにListViewを設定します。
基本はDataViewとよく似ています。違いはtplコンフィグが無くcolumnsを指定します。columnsの書き方はグリッドのcolumModelとよく似ています。グリッドについてはまた詳しく解説します。
columnにはオブジェクトを配列で表示設定を指定します。
- headerは項目の見出しテキストを設定します
- dataIndexがストアに保持されているデータのプロパティ名を指定します。JsonStoreで指定したfieldsの項目の一つになります。/li>
- widthは各列の幅のパーセンテージを指定します。0.5とすると画面の50%ということになります。
実行すると、綺麗なグリッドが自動的に作られています。見出しをクリックするとソートの方向も変更できます。
APIドキュメントでは以下のような特徴を上げています。
Ext.ListViewは、Gridの様な高速で軽いリストビュー機能を提供します。 主な機能は、次の通りです。
・カラムのリサイズ
・カラム選択
・カラム幅は、初期状態でコンテナの比率に自動的に調整されます。
・あらゆる形式に対応するためレンダーとしてテンプレートが使用できます。
・水平スクロールはサポートされません。
・カラム編集はサポートされません。
より多機能はグリッドはExt.grid.GridPanelクラスを使うべきですが、お手軽にストアの内容をグリッド表示させてたい場合は有効です。
ExtJS入門15 DataViewの使い方
テンプレートの関連のクラスとしてもう一つ、Ext.DataViewクラスがあります。
DataViewはStoreに保持しているデータをページに表示できる形式でアウトプットしてくれるクラスです。
Ext.DataViewでは、BoxComponentが帰ってきます。
Ext.ListView
ExtJS -3.0 日本語APIドキュメント – Ext.DataView
http://extdocs.xenophy.com/?class=Ext.DataView
DataViewではストアに登録されているデータをシンプルに表示させるのに使います。
以下がサンプルコードです。
・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名古屋勉強会 DataViewの使い方</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="dataview-paul.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
今回はJS側でテンプレートを生成するんので、ほとんど何もありません。
・JS
Ext.onReady(function(){
var calcData = function() {
var data = [];
var item = {}
for (var i =0; i < 50; i++) {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
item = {
id:i,
rgb:String.format('rgb({0},{1},{2})', r, g, b)
};
data[i] = item;
}
return data;
};
var initData = calcData();
var store = new Ext.data.JsonStore({
autoLoad:true,
data:initData,
fields:['id','rgb']
});
//XTemplate.fromだとstyleに値を設定できない(Firefox)
var dataViewTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="paul">',
'<div>',
'<div style="background:{rgb};width:100%;height:15px;color:#EEE; font-size:small;">',
'<div>',
'</div>',
'</div>',
'</tpl>'
);
new Ext.Panel({
renderTo:Ext.getBody(),
id:'myPanel',
title:'DataViewでカラーバーを表示',
bodyStyle:{
'text-align':'center'
},
items:{
xtype:'dataview',
tpl:dataViewTpl,
store: store,
autoHeight:true,
itemSelector:'div.paul'
},
buttonAlign:'center',
buttons:[{
scale:'large',
text:'New Color!',
handler:function(){
var newData = calcData();
store.loadData(newData);
}
}]
});
});
まずストアを用意して、データを設定します。今回はJava Scriptでデータを生成していますが、urlでJSONを取得することもできます。
今回はランダムな色を生成してJsonStoreに保持します。アップデートボタンをつけてJsonStoreの値を変更するため関数を作っておきます。
dataViewはそのままではBoxComponentですので、パネルのアイテムとして設定します。これで階層が少し深くなりますが、パネルの機能が使えるようになります。
・実行結果
ランダムに生成された色の値をdivに設定して表示します。ボタンをクリックして内容を更新することができます。なんちゃって横ポールスミスみたいな画面です。
XTemplateなどでは、毎回overwriteメソッドのように上書きを自分で指定していましたが、DataViewの場合はStoreの内容が更新されると自動的に再描画されます。
ストアの内容をさっと表示したい場所では便利です。また外部にAPIを持っていて、頻繁に更新するような場合もDataViewの方が簡単に表示を更新できます。
さらにストアの内容を簡易のグリッドとして表示するExt.ListViewクラスもあります。
ExtJS入門16 ListViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/27/extjs-tutorial16/
ExtJSのことを話す上での基礎用語について – Part2
Part1はRIAからライブラリとフレームワークの違いまでを簡単に説明しています。
JSON
ジェーソンといいます。設計段階でプログラマが登場するような会議や打ち合わせになってくると、サーバ側とクライアントUIの橋渡し(交換言語みたいな感じ)をやってくれるのが、JSONやXMLです。
JSONは、JavaScript Object Notationが正式名称で、JavaScriptにおけるオブジェクトの表記法({}を使うやつですね)をベースとした軽量なデータ記述言語というのが正しい解釈のようです。
要するに、サーバ側からテキストでこの記法にのっとったものを出力してやれば、ブラウザが受け取ったそのテキストをJavaScript側でパースするとそのままオブジェクトとして使えちゃうんですよというのが肝です。
ExtJSですと、JsonStore, JsonReaderとかでJSONを受け取るとごにょごにょしてくれて、いつの間にかExtで使えるオブジェクトに変換してくれる感じになります。
Json自体のサンプルは以下の通りです。
オブジェクトの例:
{name: "John Smith", age: 33}
配列の例:
["milk", "bread", "eggs"]
もちろん、入れ子にもできます。
営業的には、打ち合わせでこの言葉が出てきたら、なんのことはないただのテキストで、サーバ側とExtを繋ぐ橋渡し的データ記法のルールだと思っていただければ十分かと思います。
































































