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

# はじめに

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](https://qiita-image-store.s3.amazonaws.com/0/10044/9d6f0e4e-e2c0-62ba-8d35-7edc9606acb7.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レイアウトを指定すると、アイテムは一個目にしか適用されない

```js
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](https://qiita-image-store.s3.amazonaws.com/0/10044/44d1e656-113f-9e3b-c5dd-127ba3cd6827.png)

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

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

```js
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](https://qiita-image-store.s3.amazonaws.com/0/10044/c9ae1ead-f1fa-4b38-514a-71ff268e1f8e.png)

## hboxレイアウト

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

|場所|プロパティ|
|:--|:--|
|左寄せ|pack: 'start'|
|右寄せ|pack: 'end'|
|中央|pack: 'center'|

``` js:右寄せの場合
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](https://qiita-image-store.s3.amazonaws.com/0/10044/a4b3b883-0588-ff7b-73f1-467cba54b927.png)

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

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

```js:均等サイズでボタンを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](https://qiita-image-store.s3.amazonaws.com/0/10044/3a45e136-ad29-e090-cab7-a50133e78f83.png)

```js:一つだけ固定サイズで、その他のボタンを均等サイズにする
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](https://qiita-image-store.s3.amazonaws.com/0/10044/f3a59d6b-e99d-dd47-fb0b-eb2d950f6a40.png)

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

|場所|プロパティ|
|:--|:--|
|上寄せ|align: 'top'|
|下寄せ|align: 'bottom'|
|中央|align: 'middle'|

```js:下寄せ
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](https://qiita-image-store.s3.amazonaws.com/0/10044/9cdcebf2-ac88-ad7b-9959-251102da597e.png)

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

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

```js:親コンポーネントのサイズに合わせる
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](https://qiita-image-store.s3.amazonaws.com/0/10044/5c8f9ba6-a151-09e3-1e45-cea038b57879.png)

```js:一番大きいアイテムの高さに合わせる
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](https://qiita-image-store.s3.amazonaws.com/0/10044/ba8d46f3-43a7-cbd7-aa55-756a97ffa057.png)

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

```js:左右の端にボタンを配置する
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](https://qiita-image-store.s3.amazonaws.com/0/10044/7be6cc84-e2d1-c546-b6cf-1a593e9a1072.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 |