Ext

javascriptでprototype.jsはとってもいいんだけど、いつもUIはしょぼいものばかりだったんで、なにかいいUIライブラリはないかと思い、探していて見つかったのが、これです。Apolloでも使われているんですね。ちょっとチュートリアルで勉強です。

↑

環境

http://extjs.com/のhttp://extjs.com/products/extjs/download.phpより1.0.1aをダウンロードしました。解凍したものをhttp://hidekazu.dhs1.sst.ne.jp/ext/docs/におきました。もう3なんですね。はやいな～

↑

サンプル

JSONで読み込んだデータを表示する。またボタンで、違うデータを読み込む。どうせならyuiでなくprototype.jsに変更してみました。(yuiはあまり使ったことがないので...)
Aero風にする場合は、

<link rel="stylesheet" type="text/css" href="../../resources/css/ytheme-aero.css" />

を付加します。
サンプルはGridを中心に

JSONのデータを読み込んで、Gridに表示
別のJSONのデータをボタンで読み込み直して、Gridに表示
Gridのデータを書き換える。
Gridにデータを追加する。

といったものです。

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/prototype/effects.js"></script>
<script type="text/javascript" src="../../adapter/prototype/prototype.js"></script>
<script type="text/javascript" src="../../adapter/prototype/scriptaculous.js"></script>
<script type="text/javascript" src="../../adapter/prototype/ext-prototype-2.0/2.1を使ってみるadapter.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="xml-grid.js"></script>
</head>
<body>
<div id="example-grid" style="width:520px;height:300px;"></div>
<div id="msg" style="visibility: hidden"></div> 
名前：<input type="text" id="name" /><br />
<input type="button" id="okButton" value="OK" />
<div id="test1"></div>
<input type="button" id="betuButton" value="別のデータを読み込む" />
<input type="button" id="outButton" value="データを取得し、表示(ついでに中身を書き換える" />
<div id="outdata"></div>
<div id="outdata2"></div>
</body>
</html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

これ重要。

test.js

var GridShow={
 dataurl : 'test.json',
 gridobj : '',
 init : function(){
   // create the Data Store
   var RecordDef = Ext.data.Record.create([
      {name: 'id'},
      {name: 'name'},
      {name: 'occupation'},
   ]);

   var ds = new Ext.data.Store({
       // load using HTTP
       proxy: new Ext.data.HttpProxy({url: this.dataurl}),

       // the return will be JSON so lets set up a reader
       reader: new Ext.data.JsonReader({
         totalProperty: "results",
         root: "rows",
         id: "id"
       }, RecordDef)
   });

   var cm = new Ext.grid.ColumnModel([
		{header: "Id", width: 180, dataIndex: 'id'},
		{header: "Name", width: 200, dataIndex: 'name'},
		{header: "Occupation", width: 140, dataIndex: 'occupation'}
	]);
   cm.defaultSortable = true;

   // create the grid
   this.gridobj = new Ext.grid.Grid('example-grid', {
       ds: ds,
       cm: cm
   });
   this.gridobj.render();
   ds.load();
 }
}
//処理の開始
Ext.onReady(GridShow.init,GridShow,true);

//単純にメッセージを出すだけ
var MessageShow={
 //初期化
 init : function(){
   //初期値
   Ext.get('test1').dom.innerHTML = "なし";
   //OKボタンを押した時の処理
   Ext.get('okButton').on('click', function(){
	Ext.get('test1').dom.innerHTML = Ext.get('name').dom.value;
   });
 }
}

Ext.onReady(MessageShow.init,MessageShow,true);

var AnotherShow={
 //初期化
 init : function(){
   //OKボタンを押した時の処理
   Ext.get('betuButton').on('click', function(){
	GridShow.dataurl = 'test3.json';
	Ext.onReady(GridShow.init,GridShow,true);
   });
 }
}

Ext.onReady(AnotherShow.init,AnotherShow,true);

var OutShow={
 //初期化
 init : function(){
   //OKボタンを押した時の処理
   Ext.get('outButton').on('click', function(){
   		//件数表示
   		Ext.get('outdata').dom.innerHTML = '<br />' + GridShow.gridobj.getDataSource().getCount() + "件";
   		//データの中身を書き換える
   		for (i=0;i<GridShow.gridobj.getDataSource().getCount();i++) {
   			Ext.get('outdata').dom.innerHTML = Ext.get('outdata').dom.innerHTML + '<br />'+ GridShow.gridobj.getDataSource().getAt(i).get("name");
   			GridShow.gridobj.getDataSource().getAt(i).set("name",GridShow.gridobj.getDataSource().getAt(i).get("name") + i);
   			//コミットしないと、グリッドに修正マークが表示される。
   			GridShow.gridobj.getDataSource().getAt(i).commit();
   		}
   		//レコード追加
   		var addRecord  = new Ext.data.Record({id:10,name:'追加',occupation:'aaa'});
   		GridShow.gridobj.getDataSource().add(addRecord);
   });
 }
}

Ext.onReady(OutShow.init,OutShow,true);

test.json これについては、javaなり、phpで編集された結果、このようなデータを返すという想定のデータです。

  { 'results': 2, 
    'rows': [
      { 'id': 1, 'name': 'hoge1', occupation: 'hoge1' },
      { 'id': 2, 'name': 'ほげ', occupation: 'hoge1' }
    ]
  }

test3.json

  { 'results': 6, 
    'rows': [
      { 'id': 1, 'name': 'ほげ１', occupation: 'ホゲ１' },
      { 'id': 2, 'name': 'ほげ２', occupation: 'ホゲ１' },
      { 'id': 3, 'name': 'ほげ３', occupation: 'ホゲ１' },
      { 'id': 4, 'name': 'ほげ４', occupation: 'ホゲ１' },
      { 'id': 5, 'name': 'ほげ５', occupation: 'ホゲ１' },
      { 'id': 6, 'name': 'ほげ６', occupation: 'ホゲ１' }
    ]
  }

↑

TIPS

↑

API

Ext.onRead
DOMが完全に読みこまれた後に呼び出されます。その為全てのDOMが利用出来ます。

↑

FireFox?で動くが、IEで動かない。

JSONで

  { 'results': 2, 
    'rows': [
      { 'id': 1, 'name': 'ほげ１', occupation: 'ホゲ１' },
      { 'id': 2, 'name': 'ほげ２', occupation: 'ホゲ２' },
    ]
  }

とかにして返していたのですが、この最後の

      { 'id': 2, 'name': 'ほげ２', occupation: 'ホゲ２' }, <--このカンマ

にカンマがあるとIEでは動いてくれませんでした... そりゃそうか。

↑

クロスドメイン

上のサンプルでデータ取得するところは、Ext.data.HttpProxy?を使っていますが、extのdocumentを見ると、

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
  url: 'http://www.yui-ext.com/forum2/topics-remote.php'
}),

とありますので、同一ドメインはExt.data.HttpProxy?で、他のドメインの時はExt.data.ScriptTagProxy?を使いましょう。ソースをみてないですが、JSONPあたりでしょうか。

↑

BLANK_IMAGE_URL

始めに

Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";

を指定しておきます。でないとを見に行くようです。

↑

MessageBox?は止まらない？

Ext.MessageBox.alert("タイトル", "ああああ");
Ext.MessageBox.alert("タイトル", "いいいい");

とした場合、1行目が表示されOKを押した後、2行目が表示されると思いがちですが、MessageBox?は止まりません。ですので、"いいいい"が表示されます。

↑

IEでエラー

ext 2.1の時にIE7だと

<script type="text/javascript" src="javascripts/ext/adapter/prototype/prototype.js"></script>
<script type="text/javascript" src="javascripts/ext/adapter/prototype/ext-prototype-adapter.js"></script>
<script type="text/javascript" src="javascripts/ext/ext-all.js"></script>
<script type="text/javascript" src="javascripts/ext/source/locale/ext-lang-ja.js"></script>

でext-lang-ja.jsでエラーがでる。ゆるせん!IE

↑