Help us understand the problem. What is going on with this article?

【まとめ】Ext JSで困ったときに見るサイト等

More than 3 years have passed since last update.

はじめに

Ext JSで作りたい、修正したいものがあるんだけど、どうやって作れば良いか、直せばよいか分からないことは往々にしてある。 筆者自身、一つのコンポーネントを作るのにもものすごく時間がかかったし、周りの同僚に聞いても大体そんな感じだった。 そんな人に少しでも役立てれば良いなと思い、ここにまとめておいた。

公式のサンプルコードを見よう

実際のサンプルコードを読んで、何を設定すればどうなるのか、以下のサイトを見ながらコードを修正したりして動かしてみると理解が早いと思う。

サイト名 URL
Sencha Try http://try.sencha.com/
Ext JS 5.0 Examples http://dev.sencha.com/extjs/5.0.0/examples/index.html
Ext JS 4.0 Examples http://dev.sencha.com/deploy/ext-4.0.0/examples/

公式のAPIドキュメントをよく読もう

困っているのに公式のAPIドキュメントを一切読んでないとか問題外である。確かに最初はAPIドキュメントにいろいろと羅列されていてよく分からないけどとりあえず読もう。

職場で話題になったよくハマるポイントとして、コンポーネントで必ず設定しなければならない項目があるのに、設定してないでエラーが起きることが挙げられる。Ver4.2.3の Ext.grid.Panel に関しては、 columns 、 store が必須コンフィグとなっている。

スクリーンショット 2015-02-07 17.55.53.png

コンポーネントの必須項目に関しては、Ext JS APIドキュメントの該当クラスの「Configs」で、「REQ」ラベルがついているのでよく読もう。

サイト名 URL
Ext JS 5.1 http://docs.sencha.com/extjs/5.1/
Ext JS 4.2.3 http://docs.sencha.com/extjs/4.2.3/

レイアウトに関して

レイアウトに関しては以下のサンプルを見ておけば何のプロパティを指定すればどのようなレイアウトとなるかなんとなく分かるかと思う。

ExtJS Layout Examples
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html

よく使うものに関して以下に詳細を記載しておく。

Fitレイアウト

Fitレイアウトを指定すると、アイテムは一個目にしか適用されない

layout: {
    type: 'fit'
},
items:[{
    xtype: 'button',
    text: 'button1',
},{
    xtype: 'button', // ここにはFitレイアウトは適用されない
    text: 'button2',
}]

https://fiddle.sencha.com/fiddle/hrr
スクリーンショット 2015-02-07 18.57.30.png

Fitレイアウトは子のアイテムしかサイズ調整しない

孫のアイテムにはサイズ調整が適用されない。Fitレイアウトを指定してもサイズが自動調整されない場合は、余分なコンポーネントがないか確認すること。

layout: {
    type: 'fit'
},
items: [{
    xtype: 'panel',
    items: [{
        xtype: 'button',
        text: 'button' // ここにはFitレイアウトは適用されない
    }]
}]

https://fiddle.sencha.com/#fiddle/hrs
スクリーンショット 2015-02-07 19.13.39.png

hboxレイアウト

アイテムの左右位置はpackプロパティで指定する

場所 プロパティ
左寄せ pack: 'start'
右寄せ pack: 'end'
中央 pack: 'center'
右寄せの場合
layout:{
    type: 'hbox',
    pack: 'end'
},
items: [{
    xtype: 'button',
    text: 'button1'
},{
    xtype: 'button',
    text: 'button2'
}]

https://fiddle.sencha.com/#fiddle/hrt
スクリーンショット 2015-02-07 19.35.12.png

アイテムの幅を自動的に設定するにはflexで指定する

flexは割合であるため、均等サイズにするには全アイテムに同じ値のflexを指定する

均等サイズでボタンを2つ並べる
layout: {
    type: 'hbox',
    pack: 'end',
},
items: [{
    xtype: 'button',
    text: 'button1',
    flex: 1
},{
    xtype: 'button',
    text: 'button2',
    flex: 1
}]

https://fiddle.sencha.com/#fiddle/hru
スクリーンショット 2015-02-07 19.53.03.png

一つだけ固定サイズで、その他のボタンを均等サイズにする
layout: {
    type: 'hbox',
    pack: 'end'
},
items: [{
    xtype: 'button',
    text: 'button1',
    width: 100
},{
    xtype: 'button',
    text: 'button2',
    flex: 1
}]

https://fiddle.sencha.com/#fiddle/hrv
スクリーンショット 2015-02-08 0.02.19.png

アイテムの上下位置はalignプロパティで指定する

場所 プロパティ
上寄せ align: 'top'
下寄せ align: 'bottom'
中央 align: 'middle'
下寄せ
layout: {
    type: 'hbox',
    align: 'bottom'
},
items: [{
    xtype: 'button',
    text: 'button1'
},{
    xtype: 'button',
    text: 'button2'
}]

https://fiddle.sencha.com/#fiddle/hs0
スクリーンショット 2015-02-08 0.08.37.png

アイテムの高さもalignプロパティで指定する

親コンポーネントのサイズに合わせる: align: 'stretch'
一番大きい要素に合わせる: alignt='stretchmax'

親コンポーネントのサイズに合わせる
layout: {
    type: 'hbox',
    align: 'stretch'
},
items: [{
    xtype: 'button',
    text: 'button1'
},{
    xtype: 'button',
    text: 'button2'
}]

https://fiddle.sencha.com/#fiddle/hs1

スクリーンショット 2015-02-08 0.26.09.png

一番大きいアイテムの高さに合わせる
layout: {
    type: 'hbox',
    align: 'stretchmax'
},
items: [{
    xtype: 'button',
    text: 'button1',
    height: 20 // ボタン1の高さも100になる
},{
    xtype: 'button',
    text: 'button2',
    height: 100
}]

https://fiddle.sencha.com/#fiddle/hs2
スクリーンショット 2015-02-08 0.29.13.png

アイテムを左右に配置するには、flex: 1tbspacerを利用する

左右の端にボタンを配置する
layout: {
    type: 'hbox',
    align: 'bottom'
},
items: [{
    xtype: 'button',
    text: 'button1'
},{
    xtype: 'tbspacer',
    flex: 1
},{
    xtype: 'button',
    text: 'button2'
}]

https://fiddle.sencha.com/#fiddle/hs3
スクリーンショット 2015-02-08 0.33.46.png

vboxレイアウト

hboxで述べてきたことと原理は同じなので省略。
若干注意しなければならない点を以下に記載する。

アイテムの上下位置に関して

場所 プロパティ
上寄せ pack: 'start'
下寄せ pack: 'end'
中央 pack: 'center'

アイテムの左右位置に関して

場所 プロパティ
左寄せ align: 'left'
右寄せ align: 'right'
中央 align: 'center'

問題を調べよう

Ext JSに関しての問題を調べるにはStackOverflow、またはSencha Forumが鉄板である。大体の問題はここで検索すれば解決できる。それでも駄目だったらGoogle先生に検索して個人ブログなどを漁るしかないと思う。

サイト名 URL
Stack Overflow http://stackoverflow.com/
Sencha Forum http://www.sencha.com/forum/

これはバグ?

開発していると、時々バグに遭遇することがあると思う。 これ、バグじゃない?と思った時は前記のSencha Forumで検索すると、タイトル名に[OPEN]のラベルがついている記事がある。 それがまだ解決していないバグだ。 実際、Ver 4.2.2 Borderレイアウトで上下にパネルが配置されていて、パネルのtoggle, collapse時にアニメーションがおかしくなるバグがまだ解消されておらず、私自身未だに困っている。

[OPEN] Faulty collapse animation with collapseMode: 'header'
http://www.sencha.com/forum/showthread.php?234413-Faulty-collapse-animation-with-collapseMode-header

実際の動きは以下のURLを参照のこと。
http://jsfiddle.net/mjHxw/

こういった場合、周りと相談してバグを回避して表現するやり方を取るか(アニメーションんをそもそも無くす等)、とことん突き詰めてバグを解消するかのどちらかだと思う。

より良い独自コンポーネントを作成したい

US Sencha社ブログのエントリーをゼノフィ社が翻訳してくださっているのでそちらを参照すれば良いと思う。

サイト名 URL
Ext JSの開発でやってはいけない10のこと https://www.xenophy.com/extjs/7880
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away