Question

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

我查看了互联网和found this blog，它使用组合框的tpl属性来更改下拉项的样式。他还使用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 config。

设置组合框中的下拉列表项

使用工作示例检查此simple fiddle。

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

作为更复杂的解决方案，您可以覆盖Ext.view.BoundList.tpl

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

1 个答案: