今回から、ちょいちょいでてきているコンポーネント/コンテナーについて学んでいきます。
コンポーネントとは何か？
コンポーネントとは、日本語で 部品 ですね、画面を構築する部品のことを コンポーネント と呼びます。例えば、ボタンとか、入力フィールドや、チェックボックスなんかは、コンポーネントです。
基底クラス
コンポーネントの基底クラスは、すべてExt.Componentを継承しています。いままで使ってきた Ext.button.Button やExt.form.field.Text も、この Ext.Component を継承しています。
まず、この Ext.Component クラスをそのまま利用してみましょう。Sencha Ext JSのコンポーネントは、当然のことながらHTMLのタグを使って表現されています。このDOM操作を直接行う事は、Sencha Ext JSの開発において、HTMLのDOM操作を直接行う事は、希です。もちろん、DOM操作をすることもできますし、そのための便利なメソッドたちもたくさん用意されています。
しかし、しばらくはDOM操作をしないものだと思っていてください。
「結局は、HTMLなんだし直接いじくれば…」
と思うかも知れませんが、Sencha Ext JSのセオリーから外れると、せっかくの便利な機能たちの恩恵を受けられなくなります。
話を戻します。
Ext.Componentクラスを生成して、画面に表示しても実は、何も表示されません。非常に素なコンポーネントであると理解してください。なんの見た目も持たない枠だけ出来上がります。
独自のコンポーネントを作るときは、このExt.Componentを継承することになるかもしれません。もちろん、既に存在するコンポーネントの機能を拡張する場合は、そちらのクラスを継承してください。
では、まず、空の枠ができるということで、そのレンダリング結果を見てみましょう。
このExt.Componentのxtypeは、component または、boxです。boxって短くていいですね、コレ使いましょう。
指定方法は、以下の様になります。
|
1 2 3 |
{ xtype: 'box' } |
これを実際に出力すると、以下のコードが出力されます。(component-XXXXの部分のID番号は、変わるかも知れません)
|
1 2 3 |
<div class="x-component x-component-default" id="component-1010"> </div> |
見ての通り、DIVタグが1個出力されただけです、もちろんCSSクラスも指定されていますが。ここに、なにか表示してみましょう。
|
1 2 3 4 |
{ xtype: 'box', html: '<strong>つれづれなるまゝに</strong>、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。' } |
こんな感じです。
htmlにプレーンテキスト、またはHTMLテキストを指定することができます。
テンプレート
先ほど、htmlでHTMLテキストを出力しましたが、もうちょっと高度な出力ができます。それが、テンプレート出力です。
つれづれなるまゝに の部分を、連日多忙すぎて に動的に変えてみましょう。
まず、htmlの部分をtplに変えます。そして、 つれづれなるまゝに の部分を以下の様に修正します。
|
1 2 3 4 5 6 7 8 9 |
{ xtype: 'box', reference: 'mytext', tpl: '<strong>{mytext}</strong>、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。' }, { xtype: 'button', text: 'テキスト設定', handler: 'onClickMyButton' } |
そして、ビューコントーラーに以下の様に記述します。
|
1 |
this.getReferences().mytext.setData({mytext: '連日多忙すぎて'}); |
ボタンを押すとテキストが埋め込まれて、表示されます。
tplが初期状態で表示されるわけではなくて、あくまでsetDataしたときにレンダリングされる テンプレート として利用されます。
コンポーネントの見た目
コンポーネントの見た目は、 style、width、height を使って調整することができます。
|
1 2 3 4 5 6 7 8 |
{ xtype: 'box', reference: 'mytext', style : {border: 'solid 1px green'}, width: 250, height: 300, html: 'つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。' }] |
上記の、
- style
- width
- height
意外に、clsを設定すると、DIVタグに対して、CSSクラスが設定されます。
|
1 2 3 4 5 |
{ xtype: 'box', cls: 'mytext-cls', html: 'つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。' } |
|
1 2 3 |
<div class="x-component x-component-default" id="component-1010"> </div> |
終わりに
今日は、コンポーネントと呼ばれる物、そのものについて見て見ました。 Ext.Componentを直接使うのは、HTMLをただレンダリングしたい場合か、継承して自分オリジナルのコンポーネントを作るときくらいでしょう。
これから、ドンドンコンポーネントについても、種類、内容について見ていく中で、基本中の基本、コンポーネントの基本は、これです。
Ext.Componentがレンダリングされると、DIVタグが1個生成される！これだけでもしっかり覚えておいてください。
書き切れなかったので、次回はコンテナーについてです。
