Ext.Widget クラスまたは「ウィジェット」はコンポーネントに似た軽量クラスですが、Ext.dom.Element と関連リスナだけで構成されます。これによって、Ext.Widget クラスは Ext.Component からは派生していないので、ウィジェットは通常のコンポーネントとは大きく異なります。コンポーネントは堅牢なライフサイクル管理を提供し、膨大な機能を追加します。ただし、この機能には犠牲が伴います。
Ext JS 5 でいくつかのストックウィジェットを提供してきました。以下が含まれます。
- プログレスバー（Ext.ProgressBarWidget または “progressbarwidget”）
- スライダー（Ext.slider.Widget または “sliderwidget”）
- スパークライン (Ext.sparkline.*)
- 折れ線（“sparklineline”）
- 棒（“sparklinebar”）
- ディスクリート（“sparklinediscrete”）
- ブレット（“sparklinebullet”）
- 円（“sparklinepie”）
- ボックス（“sparklinebox”）
- トライステート（“sparklinetristate”）
本ガイドでは、ウィジェットの使用方法と作成方法を取り扱っています。また、新しいウィジェットカラムについても見ていきます。
ウィジェットの使用
通常のコンポーネントと同様に、ウィジェットをコンテナの「アイテム」に追加できます。例えば、スパークラインをツールバーに追加できます。
var panel = Ext.create({
xtype: 'panel',
title: 'Title',
frame: true,
renderTo: Ext.getBody(),
width: 250, height: 150,
html: 'Some text',
tbar: [{
text: 'Button'
}, '->', {
xtype: 'sparklineline',
fillColor: '#ddf',
width: 100,
height: 20,
values: [2, 3, 0, 4, -1]
}]
});スパークラインの場合、サイズ（幅と高さの両方）を提供するか、Ext JS レイアウトマネージャーを使用する必要があります。これは内部描画に natural サイズがないためです。
ウィジェットカラム
Ext JS で常に待ち望まれた機能の1つが、グリッドへコンポーネントを簡単に追加する機能です。このような機能を待望していた方は、是非ウィジェットカラムをご利用ください。
ウィジェットカラムを使用すると、コンポーネントやウィジェットをグリッドセルに簡単にレンダリングできます。ウィジェットカラムを追加するのは非常に簡単です。カラムに xtype の ‘widgetcolumn’ を割り当てて、その “widget” コンフィグを指定します。widget コンフィグはそれぞれのセルに作成する xtype を含むオブジェクトです。この xtype は Ext.Widget クラスまたは Ext.Component クラスを参照します。
ウィジェットカラムを使用してスパークラインウィジェットをグリッドに追加し、以下のように驚くほどのデータ可視化を実現できます。
上記の画像の実際例についてはキッチンシンクをご覧ください。
説明は十分だと思いますので、実際に見てみましょう。以下の例では、グリッドにウィジェットカラムを埋め込む少ないレコードでストアを作成します。
ウィジェットカラムには、各行に追加されるプログレスバーコンポーネントが含まれています。
var store = Ext.create('Ext.data.Store', {
fields: ['name','progress'],
data: [
{ name: 'Test 1', progress: 0.10 },
{ name: 'Test 2', progress: 0.23 },
{ name: 'Test 3', progress: 0.86 },
{ name: 'Test 4', progress: 0.31 }
]
});
Ext.create({
xtype: 'grid',
title: 'Widget Column Demo',
store: store,
columns: [{
text: 'Test Number',
dataIndex: 'name',
width: 100
}, {
xtype: 'widgetcolumn',
text: 'Progress',
width: 120,
dataIndex: 'progress',
widget: {
xtype: 'progressbarwidget',
textTpl: '{value:percent}'
}
}],
width: 220,
height: 250,
renderTo: Ext.getBody()
});“widget” コンフィグの理解
ウィジェットカラムの “widget” コンフィグはウィジェットの複数のインスタンスを作成するために使用されます。widget コンフィグに含まれる xtype に従って、ウィジェットカラムは Ext.Widget または Ext.Component から派生されるオブジェクトを作成します。このコンフィグは、ウィジェットカラムでレンダリングされたセルごとにインスタンスが1つすでに必要なので、インスタンスにすることはできません。
widget コンフィグは目的のコンポーネントまたはウィジェットの複数のインスタンスを作成するために使用され、各インスタンスはグリッド内の特定のレコードと行に接続されている必要があります。グリッドの使用期間、行に作成されたウィジェットが「リサイクル」され、異なるレコードや行に接続されます。
バッファリングされたレンダリングの使用
ウィジェットはコンポーネントよりも軽量でプログレスバーまたはスライダーを使用しますが、ウィジェットはグリッドの応答を高めることができます。グリッドに数行以上含まれる場合、“bufferedrenderer” プラグインを使用することが望ましいでしょう。bufferedrenderer は固定数のコンポーネントまたはウィジェットを作成します。これらのアイテムはレンダリングされていない行からリサイクルされ、新しく作成された行に追加されます。
カスタムウィジェット
Ext JS 5 は “widget-ized” バージョンのスライダーとプログレスバーに加えて新しいスパークラインが同梱されますが、カスタムでウィジェットを作成したいと考えるときもあるでしょう。Ext.Component または Ext.Widget から派生させるかの判断は作成するクラスの複雑さによります。多くの場合、シンプルなコンポーネントはコンポーネントライフサイクルやレイアウトなどを避け、要素イベントに応答する config プロパティを関連要素にマップすることができます。
ウィジェットを作成するには、Ext.Widget を継承して要素テンプレートとそのリスナを定義します。
Ext.define('MyWidget', {
extend: 'Ext.Widget',
// The element template - passed to Ext.Element.create()
element: {
reference: 'element',
listeners: {
click: 'onClick'
},
children: [{
reference: 'innerElement',
listeners: {
click: 'onInnerClick'
}
}]
},
constructor: function(config) {
// Initializes our element from the template, and calls initConfig().
this.callParent([config]);
// After calling the superclass constructor, the Element is available and
// can safely be manipulated. Reference Elements are instances of
// Ext.Element, and are cached on each Widget instance by reference name.
},
onClick: function() {
// Listeners use this Widget instance as their scope
console.log('element clicked', this);
},
onInnerClick: function() {
// Access the innerElement reference by name
console.log('inner element clicked', this.innerElement);
}
});これは Sencha Touch コンポーネントを記述したことがある場合には馴染みがあると感じるでしょう。これは Ext.Widget が Ext.AbstractComponent from Sencha Touch の拡張バージョンであるためです。リスナを要素テンプレートに追加できる機能は機能強化の1つですが、それ以外にもいくつかの機能が強化されています。詳細は Ext.Widget のドキュメントを参照してください。