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

【问题标题】：ExtJS 5: How to Customize Combobox displayExtJS 5：如何自定义组合框显示
【发布时间】：2016-02-09 16:00:57
【问题描述】：

这里我使用的是 ExtJS 5。

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

用例：

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

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

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

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

【问题讨论】：

标签： extjs combobox extjs5

【解决方案1】：

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

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

【讨论】：

【解决方案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()
});

【讨论】：