ExtJS：使用 XTemplate 的内联样式答案

【问题标题】：ExtJS: inline style with XTemplateExtJS：使用 XTemplate 的内联样式
【发布时间】：2013-10-01 11:55:25
【问题描述】：

{
        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>'
        )
}

这是我在工具栏中使用的组合框的（部分）配置。无论选择了哪些记录，我都试图让组合框显示一些静态文本（“类别”）。效果很好，除了我想为显示的文本添加一些样式（字体颜色）。现在，文本

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

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

我忽略了什么？谢谢

【问题讨论】：

标签： extjs extjs4

【解决方案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

【讨论】：

没问题，很高兴为您提供帮助！