![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
* [[Ext]] javascriptでprototype.jsはとってもいいんだけど、いつもUIはしょぼいものばかりだったんで、なにかいいUIライブラリはないかと思い、探していて見つかったのが、これです。Apolloでも使われているんですね。ちょっとチュートリアルで勉強です。 #contents ** 環境 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"; を指定しておきます。でないとhttp://extjs.com/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 **TODO ***DataView 検索 [[http://extjs.com/deploy/dev/examples/form/custom.html]] ** リンク [[Tutorial: Introduction to Ext>http://extjs.com/tutorial/introduction-ext]] チュートリアルです。~ [[Extメモ>http://www.saturn.dti.ne.jp/~npaka/ajax/ext/index.html]]~ http://www.vedovelli.com.br/?m=200704~ [[Apolloのサンプルで使われた、美しきJavaScriptフレームワーク「Ext 1.0」>http://journal.mycom.co.jp/articles/2007/04/21/ext/index.html]]~ [[WEB制作者が一度は触ってみておくべきオープンソース『Ext』>http://e0166.blog89.fc2.com/blog-entry-230.html]]~ [[Ext.js入門: Grid編>http://labs.unoh.net/2007/10/extjs_grid.html]]~ [[ysearch-extjs(Ext サンプル)>http://code.google.com/p/ysearch-extjs/downloads/list]]~ 2008/03のSoftwareDesignで紹介されていました。Extの記事があります。~ [[Ext.js入門: Grid編 >http://labs.unoh.net/2007/10/extjs_grid.html]]~ [[IDEs, plugins and tools for Ext JS 2.0>http://extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/]]~ Eclipseでextの開発をするときに。 [[ExtJSについて>http://www123.ddo.jp/extwiki/]]~ [[ExtJapan>http://www.ext-japan.org/]]~ [[API ドキュメント>http://www.ext-japan.org/docs/]]が日本語されており、見やすいです。~ [[Tutorial:Introduction to Ext 2.0 (Japanese)>http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0_(Japanese)]]~ 日本語のチュートリアルです。~ [[Ext 2.0 Tutorials>http://extjs.com/learn/Tutorials]]~ 役に立つチュートリアルがいっぱいあります。ただgridのサンプルで、JSON.phpがUTF8でdatabase.phpがms932で保存されてあって、JSON.phpをms932で保存し直しました。~ [[2.0/2.1を使ってみる>http://www123.ddo.jp/extwiki/]]~ Gridのサンプル参考にさせていただきました。ありがとうございます。~ ** 参考書籍 ** コメント -#comment
