#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|>
||<
app.js: 公式サイトのままですので割愛します。
動作確認ができましたら、"app.js" をロードしている部分をサンプルのJSファイルに順次書き換えて、練習していきます。
* HTML要素のレンダリングを試してみる。
Ext.Component で autoEl, html, tpl, renderTpl 設定を使い、どの設定がどのようなDOM要素にレンダリングされるのかステップバイステップで見ていきます。
元ネタ:
- "HTML and ExtJS Components" : Skirtle's Den
-- http://skirtlesden.com/articles/html-and-extjs-components
** 空っぽの Ext.Component
空のExt.Componentをレンダリングする、以下の様なJavaScriptファイルを作成します。
t1.js:
#code|javascript|>
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('Ext.Component', {renderTo: Ext.getBody()});
}
});
||<
index.html: app.jsをロードしていた部分を、t1.jsをロードするよう修正します。
#code|html|>
||<
&image(yb://images/20140706_extjs_custom_ext_component/t1.png)
ブラウザアドオンなどの開発者ツールからDOM構造をダンプすると、以下のようになりました。Ext.Componentが空っぽのdiv要素としてレンダリングされているのを確認できます。
#pre||>
...
# ここから、quicktips系で自動的に追加されてるっぽい。
(長いので省略)
# これが、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