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
}

我想表现得像一个普通的选择元素,当我可编辑为假时我不能再重新选择,当为真时(默认)我需要删除选择(通过退格或删除)才能重新选择.

还有什么我应该关闭以降级组合框以选择或shpuld我考虑使用其他组件？

我担心的是,如果我真的需要普通选择(不太普通 - 具有存储和操作选项的能力非常酷) - combo在我的下一级元素看来,我需要关闭的太多功能,并combo使用箭头呈现为输入什么动作触发所有动作.

---

我的问题是:

是ExtJS元素是什么使用HTML选择标记,作为选择,渲染为选择？

Answer 1

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

这可能是ExtJS最反直观的配置选项.通过阅读文档无法弄清楚它的真正作用.就像你说的,要获得一个简单的组合,你必须指定无数的配置选项,只是为了关闭花哨的东西.

ExtJS的人已经答应在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']
    ]
});