#navi_header|JavaScript|
ExtJSは豊富なコンポーネントが用意されています。しかしながら、現実のアプリケーション開発ではどうしても、自分でコンポーネントを作成するようなケースが出てきます。カスタムコンポーネントの作成については、ExtJSのドキュメントにも説明はありますが、実際の開発ではHTML要素のレンダリングなどExtJSの内部を知る必要があります。
他のコンポーネントを包含しない、単体で動作するコンポーネントは一般的にExt.Componentを派生させて作成します。その時に、HTMLのレンダリング処理やイベントハンドラをどのように設定すればよいのか、イロハが分かるような資料を目指して本記事を作成しました。
環境：
- ExtJS 5.0.0 GPLバージョン(ExtJSのCDN環境で配布されているものを使用)
- 一部、ExtJSの内部ソースの調査では ExtJS 4.2 GPLバージョン(ext-4.2.1.883) を参照しています。
#more||
#outline||
----
* 準備：Sencha公式サイトの"Hello World"を用意する。
まず、Sencha公式サイトで紹介されている"Hello World"を動かします。
- Ext JS - Hello World | Sencha
-- http://www.sencha.com/products/extjs/up-and-running/extjs-hello-world
index.html: 公式サイトのサンプルでは"ext-all.js"を読み込んでいますが、幸い"ext-all-debug.js"が置いてあるようでしたのでそちらに修正してます。
#code|html|>
(長いので省略)
# これが、t1.jsで作成した Ext.Component のDOM要素
||<
** height, width, border, style を指定してみる
Ext.Componentのconfigurationで、height, width, border, style を指定してみると、style属性に反映されました。
t2.js:
#code|javascript|>
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('Ext.Component', {
height: 100,
width: 200,
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
renderTo: Ext.getBody()
});
}
});
||<
&image(yb://images/20140706_extjs_custom_ext_component/t2.png)
→DOM要素だけを抜き出し、属性で見やすく改行：
#pre||>
||<
** html を指定してみる。
Ext.Component の html 設定を使うと、HTML文字列をそのままコンテンツとしてDOM要素に組み込まれます。
t3.js:
#code|javascript|>
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('Ext.Component', {
html: 'hello ',
renderTo: Ext.getBody()
});
}
});
||<
&image(yb://images/20140706_extjs_custom_ext_component/t3.png)
→DOM要素を確認：
#pre||>
hello
||<
** autoEl を指定してみる。
静的なHTML要素を構築したい場合は、autoEl 設定を使うこともできます。autoEl 設定ではExt.DomHelperで使える階層化されたオブジェクト要素を設定します。
t4.js:
#code|javascript|>
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('Ext.Component', {
autoEl: {
tag: 'ul',
cls: 'class-t4',
children: [
{ tag: 'li', html: 'item1' },
{ tag: 'li', html: 'item2' },
{ tag: 'li', cn: [{ tag: 'a', href: 'http://www.example.com/', html: 'linktest'}] }
]
},
renderTo: Ext.getBody()
});
}
});
||<
&image(yb://images/20140706_extjs_custom_ext_component/t4.png)
→DOM要素だけを抜き出し、見やすく改行：
#pre||>
||<
** autoEl と html を併用してみる。
autoEl と html 設定は併用ができる。ただし、静的なHTML要素をレンダリングするだけであれば、この組み合わせを使うケースは無いかもしれません。
t5.js:
#code|javascript|>
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('Ext.Component', {
autoEl: {
tag: 'p',
cls: 'class-p',
html: 'hello',
children: [
{ tag: 'li', html: 'item1' },
{ tag: 'li', html: 'item2' },
{ tag: 'li', cn: [{ tag: 'a', href: 'http://www.example.com/', html: 'linktest'}] }
]
},
html: 'html configuration ',
renderTo: Ext.getBody()
});
}
});
||<
&image(yb://images/20140706_extjs_custom_ext_component/t5.png)
→DOM要素だけを抜き出し、見やすく改行：autoElのtagをタグに指定してみたら、微妙に壊れてしまった・・・。
#pre||>
html configuration
hello
item1
item2
linktest
||<
** autoEl と html と tpl と data を併用してみる。
tpl 設定と data 設定を使うと、Ext.XTemplate/Ext.Templateを使ったテンプレート処理を埋め込むことができます。これまでのautoEl, html と組み合わせてどの順番で出力されるのか確認してみます。
※なお、autoElのタグは