Posted at

ExtJS5で扱いが変わったClassたち

More than 3 years have passed since last update.

この記事は、 Sencha Advent Calendar 2014 の4日目の記事です。

ExtJS5を使い始めて少し時間がたちました。

ExtJS4から変わったこと、変わらなかったこと、いろいろありますが、

4のときにお世話になった2つのクラスが利用できなくなったので記事とします。


Ext.grid.plugin.BufferedRenderer


ExtJS4まで

ExtJS4でのGridは、Storeに持っているデータを全て行として描画するため、

ページングのないGridでは膨大なDom要素を描画することになり、パフォーマンスに影響がでることがありました。

それを防ぐために使われていたのが、Ext.grid.plugin.BufferedRenderer でした。

このプラグインは、Storeのデータのうち一度に描画する件数を絞り込めるもので、ページングを利用しないGridではほぼ必須と言えるものです。

Ext.create({

xtype: 'grid',
plugins: {
ptype: 'bufferedrenderer'
},
...
});


ExtJS5から

ExtJS5になると、このプラグインはデフォルトで有効になっています。

Ext.grid.plugin.BufferedRenderer はprivateクラスとして扱われており、単体では利用しません。

GridにbufferedRendererコンフィグが追加され、有効/無効の切り替えができるようになっています。

Ext.create({

xtype: 'grid',
bufferedRenderer: false,
...
});


Ext.form.field.Trigger


ExtJS4まで

Ext.form.field.Trigger は TextFieldのラッパークラスで、トリガーボタンつきのTextFieldを生成するクラスでした。

xtype: 'triggerfield',

onTriggerClick: function() {
Ext.Msg.alert('Status', 'You clicked my trigger!');
},
fieldLabel: 'Sample Trigger',
emptyText: 'click the trigger'

トリガーボタンのクリックによって、onTriggerClickメソッドが呼ばれます。


ExtJS5から

ExtJS5からは、このクラスはDPRECATEDとなりました。

トリガーボタンの設置は、Ext.form.field.Text の コンフィグによって追加することができます。

xtype: 'textfield',

fieldLabel: 'Sample Trigger',
triggers: {
mytrigger: {
handler: function() {
Ext.Msg.alert('Status', 'You clicked my trigger!');
}
}
},
emptyText: 'click the trigger'


まとめ

どちらのクラスもExtJS4まではよく利用していました。

デフォルトのコンフィグに組み込まれたので、なくなったというよりは 昇格 でしょうか。

使いやすくなったことは、間違いないですね。

明日の Sencha Advent Calendar 2014@tnker さんです。