ExtJS 5：如何自定义Combobox显示

Question

我在这里使用ExtJS 5.

我必须显示一个组合框，其中包含另一个组合框的选定值。

用例：

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

此combox字段将在多个位置使用。

这里我要覆盖组合框的模板。但是当我配置＆＃34; tpl＆＃34;使用模板配置它适用于组合框列表项而不是组合框。

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

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()
});