javascript - ExtJS 组合框像常规选择一样

Question

我尝试在 FormPanel 上使用 ComboBox，它是这样定义的:

{
    xtype: 'combo',
    name: 'Reasons',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: ['myId', 'displayText'],
        data: [
            [1, 'Reason 1'],
            [2, 'Second Reason'],
            [3, 'Something else']
        ]
    }),
    typeAhead: false,
    mode: 'local',
    valueField: 'myId',
    displayField: 'displayText',
    allowBlank: false,
    editable: false,
    forceSelection: true
}

我想像一个普通的选择元素一样，当我将可编辑设置为假时，我无法再重新选择，当设置为真(默认)时，我需要删除选择(通过退格键或删除)以便重新选择-选择。

为了将组合框降级为 select 或我考虑改用其他组件，我还应该关闭什么？

我担心的是我是否真的需要普通的选择(不是很普通 - 具有存储和操作选项的能力非常酷) - combo 在我看来是下一级元素，它有太多的功能，我需要关闭并且 combo 呈现为带有向下箭头图像的输入，触发所有操作。

---

My question is:

ExtJS 元素是什么使用 HTML select 标签，作为选择，呈现为选择？

Answer 1

诀窍是使用 triggerAction: 'all' - 当您单击向下箭头图标(触发器)时，它会强制组合下拉列表显示所有项目。

这可能是 ExtJS 最反直觉的配置选项。并且不可能通过阅读文档来弄清楚它到底做了什么。就像你说的，要获得一个简单的组合，你必须指定无数的配置选项，只是为了关闭花哨的东西。

ExtJS 人员已 promise 在 ExtJS 4 中修复此问题，但在此之前我建议您创建自己的 ComboBox 类，该类以您的应用程序中最常需要的方式进行配置。例如，我当前的项目中有这样的东西:

/**
 * Simple combo, that just allows to choose from a list of values.
 */
var StaticComboBox = Ext.extend(Ext.form.ComboBox, {
    mode: 'local',
    triggerAction: 'all',
    editable: false,
    valueField: 'value',
    displayField: 'label',
    /**
     * @cfg {[[String]]} data
     * Items in combobox as array of value-label pairs.
     */
    data: [],

    initComponent: function() {
        this.store = new Ext.data.ArrayStore({
            fields: ['value', 'label'],
            data: this.data
        });
        StaticComboBox.superclass.initComponent.call(this);
    }
});

有了它，我可以用几行代码创建一个简单的组合:

new StaticComboBox({
    name: 'Reasons',
    data: [
        [1, 'Reason 1'],
        [2, 'Second Reason'],
        [3, 'Something else']
    ]
});