在网格组合框中使用自定义 HTML

Question

我需要设置网格在线编辑组合框来显示自定义 HTML。为了更具体，请查看此示例。单击Light列中的任意单元格，打开组合框。我想在每个选项（“阴影”，“大部分阴影”，...）附近放置具有独特颜色的方框。

Answer 1

我也遇到了同样的问题。当我尝试上面的解决方案时终于找到了答案（它也不起作用，但非常接近）。

结果列表项的类是 x-boundlist-item 而不是 x-combo-list-item。

如果您用该类标记您的 div 它将起作用。非常令人沮丧的是，Sencha 文档中组合框的 tpl 配置项下没有概述这一点，特别是当我能找到的所有示例都只显示项目的简单 div 时。我猜它曾经通过用 li 和类包装 tpl 配置中的任何内容来工作，但现在不再这样了。也就是说，这更通用，因为您可以通过省略这些项目的类来制作在下拉列表中不可选择的标题和行。

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

您需要做的只是修改 ComboBox 的 tpl 配置选项，并使用您自己的自定义配置。然后，您可以创建一个新的 ComboBox 并将其用作列定义的编辑器。

以下是自定义 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
    ....
}