カテゴリー: JavaScript

[ExtJS4] コンストラクタ的な要素の呼ばれる順 【メモ】

ただのメモです。

Controllerの場合

init

It is called before the Application’s launch function is executed so gives a hook point to run any code before your Viewport is created.
Viewportがインスタンス化する前に呼ばれます。

onLaunch

A template method like init, but called after the viewport is created. This is called after the launch method of Application is executed.
Viewportがインスタンス化された後に呼ばれます。

Componentの場合

initComponent

constructor

インスタンス化されるときに実行されます。2つはほぼ同時に実行されますが、 中身が全く同じと言うことではないようです。詳細は以下のエントリ参照。 Extjs4 initComponentとconstructorの違い – 日々精進

createdFn

Optional callback to execute after the class is created, the execution scope of which (this) will be the newly created class itself.
Ext.defineの第3引数。そのクラスが生成されたあとに実行されるコールバック関数。「created」ってのはインスタンス化ではなくてファイルが読み込まれたとき…と言うような気がする（後述の実行順参照）

実行順例

  1. Component: createdFn
  2. Controller: init
  3. Component: constructor
  4. Component: initComponent
  5. Application: launch
  6. Controller: onLaunch
ややこしい…

続きを読む

$.post()のコールバックが動くのはHTTPステータスコードが2xxのとき（jQuery）

前回の続き、というか補足メモ。 jQueryで作るAjaxな検索フォーム（テスト） | mutter

JavaScript: 検索部分

function sampleSearchFilckr () {
var word = $('#sampleSearchWord').val();
if(!word) {
alert('検索語を入力してください');
return false;
}
//検索
$.post(
'/sample/flickr',
{"q": word},
function(data, status) {
//searchに成功したら結果を表示する
$('#sampleSearchResult').html(data);
},
"html"
);
}

続きを読む

jQueryで作るAjaxな検索フォーム（テスト）

技術的にはだいぶ今さら感ある話題ですが作業のまとめとして。

サンプル

表題のフォームというのはこんな感じのです。
#sampleSearchResult a { border: none !important }

仕様

  • 検索語句を入力して「Flickrで検索する」を押すと僕のFlickrでの検索結果を表示する
  • 「クリア」を押すと検索語句と検索結果を削除する
  • 検索語句入力欄でリターンキーを押しても検索を開始する

続きを読む

【メモ】 imgを子要素に持つアンカーにクラス名を付与する 【jQuery】

(function() {
$('#main').find('a').each(function(){
if($(this).children('img'))
$(this).css('border', 'none');
});
})();
リンクを貼っているのがテキストの場合には下線を引きたいけど、画像の場合には下線を引かないようにしたいと言う場合にCSSで何とかならないかと試行錯誤したけど無理そうだったのでjQueryで。勉強がてら。 参考書を手に組み立てると上みたいになるんだけどなんか無駄が多い気がする… 継続審議。

修正（2011/11/29）

上手く動いてませんでした。次のように修正。 
(function() {
$('#main').find('a').each(function(){
$(this).children('img')).parent().css('border', 'none');
});
})();

続きを読む

【Tumblr】 Tumblr Queueの最新ページへのリンクを生成するGreasemonkeyを更新しました。（0.2.2）

tumblr_queue.jpg Tumblr Queueの最新ページへのリンクを生成するGreasemonkeyを更新しました。

インストール

https://gist.github.com/raw/614547/tumblr_queue_latest_link.user.js

変更点

QueueのURL変更に対応しました。

更新履歴

0.2.1 -> 0.2.2 (2011/10/29)

  • QueueのURL変更に対応しました

0.2.0 -> 0.2.1 (2011/09/06)

  • ダッシュボードのデザイン変更に対応しました

0.1.1 -> 0.2.0 (2011/06/12)

  • syoichiさんのコードを受け入れ

続きを読む

【Tumblr】 Tumblr Queueの最新ページへのリンクを生成するGreasemonkeyを更新しました。（0.2.1）

Tumblr Queueの最新ページへのリンクを生成するGreasemonkeyを更新しました。

インストール

https://gist.github.com/raw/614547/tumblr_queue_latest_link.user.js

変更点

ダッシュボードのデザイン変更に対応しました。

更新履歴

0.2.0 -> 0.2.1 (2011/09/06)

  • ダッシュボードのデザイン変更に対応しました

0.1.1 -> 0.2.0 (2011/06/12)

  • syoichiさんのコードを受け入れ

続きを読む

画面遷移せずにポップアップを実現できるjQueryプラグイン「prettyPopin」

prettyPopin | Stéphane Caron – No Margin For Errors
prettyPopin is a jQuery plugin that serves as a modal box. It is easily customizable and proved a lightweight solution to quickly and easily display content in context. It provides a nice way to display simple content or simple forms.
 
jQueryさえ利用していれば非常に少ない量のコードで簡単に実装でき、 CSSによるデザインのカスタマイズも柔軟に出来るという点で非常に便利です。 （異なるドメインのページを読み込むことは出来ませんが） 導入に当たっては以下のサイトを参考にさせていただきました。

参考

簡単にポップアップを実現するjQueryプラグイン「prettyPopin」 | HAPPY*TRAP なお、prettyPopin()を呼び出すときの設定については、 公式サイトのドキュメントに仕様がありますが、 prettyPopin documentation | Stéphane Caron – No Margin For Errors 合わせて姉妹プラグイン「prettyPhoto」のドキュメントを読むといろいろ捗ります。 prettyPhoto documentation | Stéphane Caron – No Margin For Errors 「prettyPopin」は「prettyPhoto」の簡易版という感じなのでしょうかね。

続きを読む

【メモ】 画像サイズ読み込みの遅延処理

前回のエントリはこちら。 【メモ】 jQueryライブラリ読み込みの遅延処理 – nplll 前回のエントリでは、jQueryライブラリの読み込みを待って、画像の縮小表示を行うということをしたのだけど、 それでもまだ上手く縮小できないことがあって調査を進めた結果、

  1. 画像の読み込みが追いつかないことがある
  2. 画像を読み込んでいるのに画像の高さの取得に失敗することがある
    • なぜか取得できる高さは「13」
という事象が起こりうることが分かりました。 「なんで？」かはしらん（苦笑） とりあえず対策を盛り込みたいと思います。

続きを読む

【メモ】 jQueryライブラリ読み込みの遅延処理

読み込んだAmazonの商品画像のサイズを、これで調整しているのですが、 【メモ】 画像の縦横比を維持したまま、画像サイズを一定の範囲内に縮小 – nplll どうも調整に失敗することが多くて上手く行かない。 どうやら、jQueryを読み込む前に処理を行おうとして失敗してるみたい。 GoogleからjQueryライブラリを読み込んでるせいかな？ おや。 解決策： jQueryを読み込み終わるのを待って処理をするようにSetTimeoutを設定する。

参考

うのらぼ。 – 【JavaScript】jQueryの読み込み待ちとか関数の処理待ちとか遅延処理っぽいこと

続きを読む