templates - Extjs カスタム コンボボックス

Question

上記のようなカスタム コンボを作成する方法は? ここでは、コンポーネントに小さなハックを行いました。この方法で、任意の html 要素をコンボの選択項目に追加できます。

Ext.define('AMShiva.ux.custom.Combo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.ux_combo',


    colorField: 'color',//to get color value
    displayField: 'text',
    valueField:'value',

    initComponent: function () {
        var me = this;
        // dropdown item template
        me.tpl = Ext.create('Ext.XTemplate',
                    '<tpl for=".">',
                    '<div class="x-boundlist-item">',
                    '<span style="background-color: {' + me.colorField + '};" class="color-box-icon"></span>{' + me.displayField + '}',
                    '</div>',
                    '</tpl>'
                );
        me.callParent(arguments);

        // here change the selection item html
        me.on('change',
            function(element, newValue) {
                var inputEl = element.inputCell.child('input');
                var data = element.getStore().findRecord(element.valueField, newValue);

                    if (data) {
                        inputEl.applyStyles('padding-left:26px');
                        var parent = inputEl.parent(),
                            spanDomEle = parent.child('span');

                        if (!spanDomEle) {
                            Ext.DomHelper.insertFirst(parent, { tag: 'span', cls: 'color-box-icon' });
                            var newSpanDomEle = parent.child('span');
                            newSpanDomEle.applyStyles('background-color: ' + data.get(element.colorField) + ';float: left;position: absolute;margin: 3px 2px 2px 4px;');
                        } else {
                            spanDomEle.applyStyles('background-color:' + data.get(element.colorField));
                        }
                    }
            });
    }
});

サンプル ストア:

var store = Ext.create('Ext.data.Store', {
            fields: ['value', 'text', 'color']
        });

CSS:

.color-box-icon {
width: 16px;
height: 16px;
margin: 0px 4px 0px -3px;
padding: 0px 8px;
}

このようなことを行う別の方法はありますか？