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。

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

我担心的是，如果我真的需要普通选择（不太普通 - 存储和操作选项的能力非常酷） - combo在我看来下一级元素我需要转动太多功能off和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']
    ]
});

ExtJS组合框就像常规选择一样

1 个答案: