在ExtJS 4组合框中设置项目的样式

Question

我正在构建这个Web应用程序，我有一个组合框，里面有几个项目。我可以分别使用fieldCls和labelCls来正确设置字段和标签的样式。但是，我还想设置下拉项目的样式，使它们看起来与字段值相同。

我查看了互联网和我使用组合框的tpl属性的found this blog来改变下拉项目的样式。他还使用css文件中定义的现有样式类作为样式。我试图为我的组合框做这个，但我没有看到一个简单的“tpl”属性。我试图添加fieldSubTpl，Sencha Architect给了我这样的模板：

fieldSubTpl: Ext.create('Ext.XTemplate', 
     '<div class="{hiddenDataCls}" role="presentation"></div>',
     '<input id="{id}" type="{type}" {inputAttrTpl} class="{fieldCls} {typeCls} {editableCls}" autocomplete="off">',
     '<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
     '<tpl if="name"> name="{name}"</tpl>',
     '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
     '<tpl if="size"> size="{size}"</tpl>',
     '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
     '<tpl if="readOnly"> readonly="readonly"</tpl>',
     '<tpl if="disabled"> disabled="disabled"</tpl>',
     '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
     '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
     '/>',
     {
         disableFormats: true
     }

但是我不知道如何配置这个，我试图使用上面使用的博客代码，取代我自己的风格，但无济于事。

似乎他们改变了tpl用于组合框的方式，我无法找到我所拥有的参考。

Answer 1

您可以使用Ext.form.field.ComboBox.tpl配置在组合框中设置下拉列表项的样式。

用工作示例检查这个simple fiddle。

你可以在Ext.view.BoundList.tpl中阅读如何使用它的描述，因为Ext.view.BoundList是Ext.from.field.ComboBox的一个选择器组件（不知道为什么这个描述在Ext.form.field.ComboBox.tpl中没有重复）。

作为更复杂的解决方案，您可以覆盖qazxsw poi