根据组合框 Ext JS 中的选定选项显示文本

Question

我有几个选项的组合框，我需要它在选择某个选项时显示相应的文本。例如，如果用户选择“选项 1”、“选项 2”或“选项 3”等，他还应该在组合框下方看到一些文本，解释选择特定选项的作用。有人可以向我解释实现此目标的好方法吗？

这是我的字段示例以及我如何尝试存储选项和解释。

items: [
    {
        itemId: 'type-label',
        margin: '0 0 20 0'
    },
    {
        xtype: 'combobox',
        queryMode: 'local',
        itemId: 'type',
        width: '70%',
        allowBlank: false,
        displayField: 'text',
        valueField: 'value',
        value: {text: 'Option 1', value: 'value_1'},
        bind: {
            store: [
                {
                    text: 'Option 1',
                    value: 'value_1'
                },
                {
                    text: 'Option 2',
                    value: 'value_2'
                },
                {
                    text: 'Option 3',
                    value: 'value_3'
                }
            ],
        }
    },
    {
        xtype: 'fieldset',
        cls: 'select-fieldset',
        itemId: 'combobox-text',
        hidden: true,
        items: [
            {
                itemId: 'option-1-label',
                bind: {
                    html: 'helper text explaining what selection "Option 1" does'
                },
                margin: '0 0 10 0'
            },
            {
                itemId: 'option-2-label',
                bind: {
                    html: 'helper text explaining what selection "Option 2" does'
                },
                margin: '0 0 10 0'
            },
             {
                itemId: 'option-3-label',
                bind: {
                    html: 'helper text explaining what selection "Option 3" does'
                },
                margin: '0 0 10 0'
            },
        ]
    }
],

Answer 1

您可以在 combobox 的 change 事件上设置侦听器，并根据新值显示信息标签。

我为你设置了一个 Sencha fiddle，我做了类似的事情。

https://fiddle.sencha.com/#view/editor&fiddle/37j2

根据组合框 Ext JS 中的选定选项显示文本

Show text based on selected option in combobox Ext JS

javascript

combobox

extjs