Question

我需要设置网格内联编辑组合框来显示自定义HTML。更具体一点，请看this sample。单击Light列中的任意单元格，打开组合框。我想放置每个选项附近（“阴影”，“大部分阴暗”，......）方形盒，颜色独特。

Answer 1

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

原来，列表项的类是x-boundlist-item而不是x-combo-list-item。

如果你用这个课标记你的div它会起作用。非常令人沮丧的是，在用于组合框的tpl配置项下的Sencha文档中没有概述这一点，特别是当我能找到的所有示例只显示项目的简单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

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

以下是自定义ComboBox模板的示例：

editor

然后，在实例化编辑器时可以使用该XTemlate;

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

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

3 个答案: