我正在构建这个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用于组合框的方式,我无法找到我所拥有的参考。
您可以使用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