ExtJS 5：如何自定义组合框显示

Question

这里我使用的是 ExtJS 5。

我必须显示一个组合框，其下方是另一个组合框的选定值。

用例：

我必须在组合框输入字段下方显示组合框的选定值，如下图所示-

此组合框字段将在多个地方使用。

这里我想覆盖combobox的模板。但是当我使用模板配置 "tpl" 配置时，它应用于组合框列表项而不是组合框。

如何覆盖组合框的默认渲染？

Answer 1

Labelable mixin 提供了相关的模板。你可以试试 afterBodyEl.

要了解 Sencha 使更新模板变得多么复杂，请查看 setActiveErrors 方法的代码。

Answer 2

您可以在组合框中使用不同的模板显示所需数据。

对于我的用例，我使用 "afterSubTpl" 在组合框的输入字段下方显示文本。

示例代码：

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    afterSubTpl: '<div>My Custom Text</div>',
    renderTo: Ext.getBody()
});

ExtJS 5：如何自定义组合框显示

ExtJS 5: How to Customize Combobox display

combobox

extjs

extjs5