pages
Archives
- 2009 年 6 月 (1)
- 2009 年 4 月 (3)
- 2009 年 3 月 (4)
Blogroll
- Ext Japan - ExtJSの日本語サポートを行っています。
- ExtJapan - 日本語APIドキュメントもあります
- 蜘蛛の糸をつむぐには - ExtJSのまとめ情報あり
しばらく前にアナウンスがあったAmazonの提供しているAPIを利用するのリクエスト時に電子署名を追加する件で，「まぁそのうちやればいいや…」と思っていたら，Amazonさんからメールが来ました。
意訳すると「まだリクエスト時に電子署名を含めてないでしょ！ 早くちゃんと対応してよね。」ということだったので対応しておきました。
Firefoxだけで出ていた不具合です。FireFoxのバージョンは異なると思われますが，ここで報告されているものと現象としては同じです。
対策としてはすべてiframeの中身がロードされているかどうかをチェックしてロードされるまで待ってからExtJSを実行してやればいいわけで，とりあえず対策だけ取っておきました。
if (Ext.isGecko) {
var iframes = document.getElementsByTagName('iframe');
var count = 0;
var loaded = false;
for (var i = 0; i < iframes.length; i++) {
iframes[i].onload = function () {
count++;
if (count >= iframes.length-1 &amp;amp;&amp;amp; !loaded) {
loaded = true;
//ここに本来実行すべき処理を記述
YAHOO.util.Get.script(urls, myHandler);
}
};
}
} else {
YAHOO.util.Get.script(urls, myHandler);
}
やっていることは，次の通りです。
- Firefox系のブラウザであればすべてのiframe要素を取得
- その要素にonloadイベントを設定
- onloadイベントの中でロードが完了したiframeの数を数えておいて，完了したら本来実行すべき関数を呼び出す
とりあえずこれで動いているので，よしというところですかね。
今日，確認のためにIEでサイトを表示させたところ，「16進数を指定してください」というエラーが発生。
どうもYahoo!ショッピングからのデータを取得しているところで出ている様子。ところが同じデータでもFireFoxではエラーが発生しない…。
で，問題のデータをよ〜く見てみたところ以下のようなデータでエラーが出ていることを発見
\x{d7}143(D)\x{d7}21(H)mm (\u7a81\u8d77\u90e8\u5206\u3092\u9664\u304f) \u25cf\u8cea\u91cf:\u7d04380g
問題はどこかというと”\x{d7}”とは”\x{d7}”の部分。FireFoxでは問題なく読み取ってくれるのだが，IEではこれがエラーになるみたい。
でどうするかというと，”\x{d7}”の部分が”\00d7″となるように変換してやればOK。この質問で取り上げられていることと原因・対策ともに同じでOK。
価格情報に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/
とりあえず無事にインストールできて良かったです。先達たちに感謝。
FormPanelで送信ボタンを押した時に出て悩まされました。
結局，FORUMの情報を元に変更して対応しました。リクエスト先の設定をFormPanelのrenderが実行された後にずらすということのようです。
ただ必ずこうしないとエラーが出るのかというとそういうことでもないようで，PCパーツ価格速報では次のようになります。
- 検索メニューの「型式検索」
これはFormPanelのconfigでurlを設定しても大丈夫でした。つまりrenderイベント発生後に設定ということをしなくても大丈夫というわけです。 - 検索メニューの各カテゴリの検索
たとえば「intel製CPUの検索」とか「CPUファンの検索」とかの部分です。これはrenderイベント発生後に設定しないと「NS_ERROR_ILLEGAL_VALUE」が発生しました。
簡単なサンプルを作ろうとしたんですけど，エラーが出ないんですよね。どういう条件だと出て，どういう条件だと出ないのかはまだ不明です。
とりあえず回避方法は分かっているので，現時点ではよしとしてます。
結構，はまりました。理由は未だに？です。どうなるかと言いますと，こんな感じです。サンプル
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のフォーラムを見てもよく分かんないんですよね。答えがはっきりしないこのスレッドも実はこれが原因だったりして。
リニューアルしたPCパーツ価格速報ですが，個々のパーツの価格を表示させた後，右側の「プラン1」という部分に価格をDrag&Dropすることができます。
PCパーツ価格速報をご利用頂き，ありがとうございます。
この度，ExtJSを利用してサイトをリニューアルしました。引き続きよろしくお願いいたします。
Wordpress theme by Wordpress Themes & made free by Internet Marketing Center
Edit here in the footer.php