pages
Archives
- 2010 年 2 月 (3)
- 2010 年 1 月 (9)
- 2009 年 12 月 (14)
- 2009 年 11 月 (3)
- 2009 年 9 月 (1)
- 2009 年 8 月 (2)
- 2009 年 7 月 (2)
- 2009 年 6 月 (1)
- 2009 年 4 月 (3)
- 2009 年 3 月 (4)
Blogroll
- Ext Japan - ExtJSの日本語サポートを行っています。
- ExtJapan - 日本語APIドキュメントもあります
- 蜘蛛の糸をつむぐには - ExtJSのまとめ情報あり
5
1 月
昨日，アップした「HTMLのTABLEをExt JSのGridに変換する」では，TABLEタグのデータをそのまま利用していたわけですが，当然，このデータの見せ方を変えたいということもあるわけです。
TABLEタグを変換する際に，configオプションとしていろいろと指定できるんですよというお話です。
HTMLは以下の通りです。実際の動作はこちらで確認できます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTMLのテーブルをGridに変換</title>
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css">
<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext/ext-all.js"></script>
<script type="text/javascript" src="../script/grid/from_markup.js"></script>
</head>
<body>
<button id="create-grid">変換</button>
<table id="table1">
<thead>
<tr>
<th>ショップ名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>ショップA</td>
<td>2000</td>
</tr>
<tr>
<td>ショップB</td>
<td>1500</td>
</tr>
<tr>
<td>ショップC</td>
<td>2300</td>
</tr>
<tr>
<td>ショップD</td>
<td>2500</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
Ext.onReady(function(){
var btn = Ext.get("create-grid");
btn.on("click", function(){
btn.dom.disabled = true;
// create the grid
var grid = new Ext.grid.TableGrid("table1", {
stripeRows: true, // stripe alternate rows
width: 200,
fields:[
{type: 'string', name: 'shop'},
{type: 'int', name: 'price'}
],
columns:[
{dataIndex: 'shop',width: 120, header: '店名'},
{dataIndex: 'price', width:80, header: '販売価格'}
],
});
grid.render();
}, false, {
single: true
}); // run once
});
</script>
</body>
</html>
追加したのは49〜52行目の「field」と，53〜56行目の「columns」の指定です。
今回のスクリプトでは，columnsオプションに列幅や列タイトルを指定して，Gridを表示する際の列幅や列名をTABLEタグでの指定とは異なるものに変更しています。
- 49〜52行目の「field」
Ext.data.Recordのcreateメソッドに渡す配列と同じものを指定します。HTMLタグのTABLEがExt.grid.TableGridでGridに変換される際，どのデータをどのようにGrid（実際にはGridと関連づけられているStore）に取り込むかを指定できます。 - 53〜56行目の「columns」
Ext.grid.GridPanelの初期化オプションcolumnsに指定する配列です。Gridの各列の列タイトルや列幅，renderer等を指定します。
no comment
4
1 月
HTMLのTABLEをExt JSに変換するスクリプトです。Ext JSのサンプルとほぼ同じです。
HTMLの部分は次の通りです。実際の動作はこちらで確認できます。ちなみにExt JSのバージョンは2.3.0です。
<!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=utf8">
<title>HTMLのテーブルをGridに変換</title>
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css">
<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext/ext-all.js"></script>
<script type="text/javascript" src="../script/grid/from_markup.js"></script>
</head>
<body>
<button id="create-grid">変換</button>
<table id="table1">
<thead>
<tr>
<th>ショップ名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>ショップA</td>
<td>2000</td>
</tr>
<tr>
<td>ショップB</td>
<td>1500</td>
</tr>
<tr>
<td>ショップC</td>
<td>2300</td>
</tr>
<tr>
<td>ショップD</td>
<td>2500</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
Ext.onReady(function(){
var btn = Ext.get("create-grid");
btn.on("click", function(){
btn.dom.disabled = true;
// create the grid
var grid = new Ext.grid.TableGrid("table1", {
stripeRows: true // stripe alternate rows
});
grid.render();
}, false, {
single: true
}); // run once
});
</script>
</body>
</html>
- 12行目
ボタンにid属性を指定します。このid属性を指定してボタン要素を取り出します(41行目)。 - 13〜38行目
TABLE要素です。Gridに変換する際にid属性を指定して，TABLE要素を特定します(46行目)。 - 14〜19行目
ヘッダはTHEAD要素で囲みます。この指定を忘れると正しくGridに変換できません。 - 20〜37行目
データはTBODY要素で囲みます。これも忘れると正しくGridに変換できなくなります。 - 40行目の Ext.onReady
HTMLがすべて読み込まれた後で実行される関数です。Ext JSを利用するときは，このExt.onReady関数の中に処理を書いていきます。 - 41行目
ボタン要素を取得 - 42〜53行目
ボタンが押された時の処理を指定- 43行目
ボタンをディセーブルします。2度押されないようにということですね。 - 46〜48行目
HTMLをGridに変換します。 - 49行目
Gridをレンダリングします。
- 43行目
4
1 月
1
4 月
価格情報にAmazonの情報を表示するようにしました。Amazon Web Servicesを利用して実現しています。
実際にAmazonから価格情報を取得する部分は Service_Amazonを利用させていただきました。おかげさまで比較的ちゃっちゃと作ることができました。
Service_Amazonをインストールすることのほうが大変でした。レンタルサーバーを利用しているので，PEARのモジュールを勝手に入れることができません。入れるとすれば，自分のユーザーディレクトリに入れる必要があります。そうなるとディレクトリの設定やらなんやらで面倒そう…ということで，「Amazonは後回し」になっていたのでした。
参考にしたのはこんなところ。
- http://zenryokuhp.com/server/sakura_pear.htm
- http://pear.php.net/←go-pear.phpをダウンロードするここからどうぞ
- http://blog.technology-knowledge.jp/2007/12/13/64/
とりあえず無事にインストールできて良かったです。先達たちに感謝。
30
3 月
FormPanelで送信ボタンを押した時に出て悩まされました。
結局，FORUMの情報を元に変更して対応しました。リクエスト先の設定をFormPanelのrenderが実行された後にずらすということのようです。
ただ必ずこうしないとエラーが出るのかというとそういうことでもないようで，PCパーツ価格速報では次のようになります。
- 検索メニューの「型式検索」
これはFormPanelのconfigでurlを設定しても大丈夫でした。つまりrenderイベント発生後に設定ということをしなくても大丈夫というわけです。 - 検索メニューの各カテゴリの検索
たとえば「intel製CPUの検索」とか「CPUファンの検索」とかの部分です。これはrenderイベント発生後に設定しないと「NS_ERROR_ILLEGAL_VALUE」が発生しました。
簡単なサンプルを作ろうとしたんですけど，エラーが出ないんですよね。どういう条件だと出て，どういう条件だと出ないのかはまだ不明です。
とりあえず回避方法は分かっているので，現時点ではよしとしてます。
29
3 月
結構，はまりました。理由は未だに？です。どうなるかと言いますと，こんな感じです。サンプル
Firefox3でもSafariでもIE7でもIE8でもエラーは発生しません。IE6でアクセスした場合だけ「引数が無効です」というエラーがでます。もっともIE6といっても，MAC上でVirtualBoxを使ってWindows2000を起動し，その上で動かしたIE6で試しているので，うまく動くという場合もあるかもしれません。
エラーが発生するHTMLの中身はこうなっています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.parts-price.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- ExtJS style sheet -->
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<!-- ExtJS script -->
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<title>test002.html</title>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function () {
var record = Ext.data.Record.create([
{name: 'model'}
,{name: 'specUrl'}
]);
var reader = new Ext.data.JsonReader(
{
root: "items"
}
,record
);
var proxy = new Ext.data.ScriptTagProxy({
url: 'phps/parts-price/new_spec.php'
,method:'GET'
,callbackParam:'callBack'
});
var store = new Ext.data.Store({
reader: reader
,proxy: proxy
,listeners:{
load: function(s, r, o) {
var str = "";
for (var i=0; i < s.getCount(); i++) {
str += r[i].get('model');
str += "<br>"
}
var el = document.getElementById('test');
el.innerHTML = str;
}
}
});
store.load();
});
</script>
<div id="test"></div>
</body>
</html>
で何が問題になっているかというと，4行目のbaseタグです。こいつを外すとなぜかうまく動きます。エラーが出ない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">
<!-- ExtJS style sheet -->
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
<!-- ExtJS script -->
<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext/ext-all.js"></script>
<title>test003.html</title>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function () {
var record = Ext.data.Record.create([
{name: 'model'}
,{name: 'specUrl'}
]);
var reader = new Ext.data.JsonReader(
{
root: "items"
}
,record
);
var proxy = new Ext.data.ScriptTagProxy({
url: '../phps/parts-price/new_spec.php'
,method:'GET'
,callbackParam:'callBack'
});
var store = new Ext.data.Store({
reader: reader
,proxy: proxy
,listeners:{
load: function(s, r, o) {
var str = "";
for (var i=0; i < s.getCount(); i++) {
str += r[i].get('model');
str += "<br>"
}
var el = document.getElementById('test');
el.innerHTML = str;
}
}
});
store.load();
});
</script>
<div id="test"></div>
</body>
</html>
baseタグを取り，それに合わせてディレクトリの階層を考慮しただけです。これでIE6でも動くようになります。
何かまずい書き方をしているんでしょうかね。ExtJSのフォーラムを見てもよく分かんないんですよね。答えがはっきりしないこのスレッドも実はこれが原因だったりして。
Wordpress theme by Wordpress Themes & made free by Internet Marketing Center
Edit here in the footer.php