Question

{
        xtype: 'combobox',
        itemId: 'categoryselect',
        queryMode: 'local',
        store: {
            type: 'array',
            fields: ['prod_cat']
        },
        displayField: 'prod_cat',
        multiSelect: true,

        displayTpl: new Ext.XTemplate( 
            '<p style="color:red;">Categories</p>'
        )
}

这是我在工具栏中使用的组合框配置的（部分）。我试图让组合框显示一些静态文本（＆＃39;类别＆＃39;），无论选择哪种记录。完美无缺，除了我想在显示的文字中添加一些样式（字体着色）。现在，文字

<p style="color:red;">Categories</p>

显示在组合框中，而不是Categories显示为红色。

我忽略了什么？感谢

Answer 1

displayTpl用于实际渲染到底层字段的值...所以它渲染了你告诉它渲染的内容：）

要完成您要执行的操作，我会在组合框中添加cls配置，然后通过CSS设置文本颜色样式，如下所示：

{
        xtype: 'combobox',
        itemId: 'categoryselect2',
        queryMode: 'local',
        fieldLabel: 'Correct',
        store: {
            type: 'array',
            fields: ['prod_cat'],
            data: [
                ['Cat1'],
                ['Cat2'],
                ['Cat3']
            ]
        },
        displayField: 'prod_cat',
        multiSelect: true,
        displayTpl: new Ext.XTemplate('Categories'),
        cls: 'special'
    }

.special input {color:red;} // css

以下是一个示例：https://fiddle.sencha.com/#fiddle/m0

ExtJS：使用XTemplate的内联样式

1 个答案: