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

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

ExtJS5を使い始めて少し時間がたちました。
ExtJS4から変わったこと、変わらなかったこと、いろいろありますが、
4のときにお世話になった２つのクラスが利用できなくなったので記事とします。

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 さんです。