Используйте пользовательский HTML в комбинированном окне сетки

Question

Мне нужно настроить комбинированное поле редактирования сетки для отображения пользовательского HTML. Чтобы быть более конкретным, пожалуйста, посмотрите на этот образец . Нажмите на любую ячейку в столбце Light, откройте поле со списком. Я хочу разместить рядом с каждый вариант («Тень», «В основном тенистый», ...) квадрат с уникальным цветом.

Answer 1

У меня была такая же проблема.Наконец-то нашел ответ, когда я пробовал решение выше (которое тоже не работает, но очень близко).

Оказывается, классом для элементов списка является x-boundlist-item, а не x-combo-list-item.

Если вы пометите свой div этим классом, он будет работать.Чрезвычайно расстраивает то, что это не описано в документации Sencha под элементом конфигурации tpl для комбинированных блоков, особенно когда во всех примерах, которые я могу найти, просто показан простой div для элементов.Я предполагаю, что раньше он работал, оборачивая все, что было в конфиге tpl, с li и классом, но это больше не работает.Тем не менее, это более универсально, так как вы можете создавать заголовки и строки, которые не могут быть выбраны в ваших выпадающих списках, не используя класс для этих элементов.

var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});


Ext.application({
    name: 'SRC',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            xtype:{
                type:'vbox',
                align: 'center',
                pack: 'center'
            },   items:[
                     {xtype:'combobox',
                      fieldLabel: 'Choose State',
                      store: states,
                      queryMode: 'local',
                      displayField: 'name',
                      valueField: 'abbr',
                      tpl:'<tpl for="."><div class="x-boundlist-item">{name}</div></tpl>'

                            }

        ]})
}})

Спасибо

Answer 2

Чтобы заставить его работать глобально (для всех комбинированных списков), используйте следующее переопределение:

Ext.override(Ext.form.field.ComboBox, {
  initComponent: function() {

    // the code above remains same (you can copy it from ext-all-debug.js), add the following at the end of initComponent
    me.tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="x-boundlist-item">',
                    '{' + me.displayField + ':htmlEncode}',
                '</div>',
            '</tpl>'
        );
   }
});

Answer 3

Что вам нужно сделать, это просто изменить параметр конфигурации tpl в ComboBox и использовать свою собственную конфигурацию. Затем вы можете создать новый ComboBox и использовать его в качестве editor для определения столбца.

Вот пример пользовательского шаблона ComboBox:

var resultTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="x-combo-list-item">',
        '<span class="number">{#}</span>',            
            '<h3 class="{itemColor"}>',
                '{itemName}',
            '</h3>',
        '</div>',
    '</tpl>'
);

Затем вы можете использовать этот XTemlate при создании экземпляра вашего редактора;

var combo = {
    xtype: 'combo',
    tpl: resultTpl
    ....
}