Question

我正在将我的应用程序从ExtJs 3迁移到4版本。我在formPanel上有几个组合框，之前我使用过hiddenName 和所有stuff提交valueField而不是displayField。

我所有的改编工作正常（值字段IS提交），但我无法设置组合框的默认值，它们在页面加载后显示为空。以前，我只是在config中指定'value'参数。有什么想法可以解决这个问题吗？

我的代码 - 型号和商店：

Ext.define('idNamePair', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'string'},
        {name: 'name',  type: 'string'}
    ]
});

var dirValuesStore = new Ext.data.Store({
    model: 'idNamePair',
    proxy: {
        type: 'ajax',
        url: '../filtervalues.json',
        reader: {
            type: 'json',
            root: 'dir'
        }
    },
    autoLoad: true
});

Combo config：

{
    triggerAction: 'all',
    id: 'dir_id',
    fieldLabel: 'Direction',
    queryMode: 'local',
    editable: false,
    xtype: 'combo',
    store : dirValuesStore,
    displayField:'name',
    valueField:'id',
    value: 'all',
    width: 250,
    forceSelection:true
}

Answer 1

我遇到了同样的问题，在将商品添加到商店之前，afaik与选择列表呈现有关。我没有运气就尝试了上面提到的回调方法（猜测它必须是选择列表而不是商店的回调）。

我在向商店添加商品后添加了这一行，并且工作正常：

Ext.getCmp('selectList').setValue(store.getAt('0').get('id'));

Answer 2

将loading: true添加到商店配置会解决问题。 autoLoad: true和forceSelection: true似乎存在问题。即使加载功能还没有被解雇，这个小黑客也会让你的组合框相信商店正在加载。

Answer 3

执行此操作的最佳方法是侦听afterrender事件，然后在回调函数中设置默认值。

请参阅此代码：

new Ext.form.field.ComboBox({
    //This is our default value in the combobox config
    defaultValue: 0,
    listeners: {
        //This event will fire when combobox rendered completely
        afterrender: function() {
           //So now we are going to set the combobox value here.
           //I just simply used my default value in the combobox definition but it's possible to query from combobox store also.
           //For example: store.getAt('0').get('id'); according to Brik's answer.
           this.setValue(this.defaultValue);    
        }
    }
});

Answer 4

我注意到你的Combo配置有queryMode: 'local'。该值适用于将数据本地存储在数组中的情况。但是你的模型使用的是AJAX代理。难道这会混淆Ext，所以找不到你想要设置的默认值吗？尝试删除queryMode，使其默认为'remote'的值（或明确设置）。

更新：我在发布上述文件后立即将我自己的应用程序从Ext3迁移到了4，我遇到了完全相同的问题。我确信queryMode是其中的一部分，但主要问题是组合框在渲染时还没有所需的数据。设置value确实给它一个值，但数据存储中没有任何东西可以匹配它，因此该字段显示为空白。我发现autoLoad属性还可以指定在加载数据时使用的回调函数。这是你能做的：

store: new Ext.data.Store({
    model: 'MyModel',
    autoLoad: {
        scope: this,
        callback: function() {
            var comboBox = Ext.getCmp("MyComboBoxId");
            var store = comboBox.store;

            // set the value of the comboBox here
            comboBox.setValue(blahBlahBlah);
        }
    }
    ...
})

Answer 5

您可以将逻辑直接放入回调中，也可以设置一个函数来处理所有商店。

var store1 = Ext.create('Ext.data.Store', {
    ...
    autoLoad: {
        callback: initData 
    }
});

var store2 = Ext.create('Ext.data.Store', {
    ...
    autoLoad: {
        callback: initData 
    }
});

var myComboStores = ['store1', 'store2']

function initData() {
    var loaded = true;
    Ext.each(myComboStores, function(storeId) {
        var store = Ext.StoreManager.lookup(storeId);
        if (store.isLoading()) {
            loaded = false;
        }
    }
    if(loaded) {
        // do stuff with the data
    }
}

=====================

对于那些阅读，“combo”对象上的值配置/属性应设置为某个值，以便组合框获取初始值。你已经这样做了。在将其设置为默认值之前，值'all'也需要存储在您的商店中。

value: 'all'

此外，最好为 valueField 配置设置一个值，您已经这样做了。如果不这样做，则在调用combo.getValue（）时，select侦听器将无法获得正确的值。

Answer 6

我敢打赌，这与您（异步）加载组合框的时间以及设置组合框的值的时间有关。要解决这个问题，只需执行以下操作：

Ext.define('idNamePair', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'string'},
        {name: 'name',  type: 'string'}
    ]
});

var dirValuesStore = new Ext.data.Store({
    model: 'idNamePair',
    proxy: {
        type: 'ajax',
        url: '../filtervalues.json',
        reader: {
            type: 'json',
            root: 'dir'
        }
    },
    autoLoad: false // set autoloading to false
});

商店的自动加载已关闭。现在，在之后，您已将ComboBox放置在某个位置 - 使用起始帖子中的代码 - 您只需手动加载商店：dirValuesStore.load();。

这可能是在某个组件Ext.apply(this, {items: [..., {xtype: 'combo', ...}, ...]})中的配置initComponent()之后。

Answer 7

试试这段代码：

var combo = new Ext.form.field.ComboBox({
    initialValue : something,
    listeners: {
        afterrender: function(t,o ) {
           t.value = t.initialValue;    
        }
    }
})

Answer 8

在配置中指定'value'参数是设置组合框默认值的正确方法。

在您的示例中，只需设置forceSelection:false，它就可以正常工作。

如果你想设置forceSelection:true，你应该确保从商店返回的数据包含一个值等于默认值的项目（在这种情况下为'all'）。否则，它'默认情况下是空文本。为了更清楚，请将此dirValuesStore定义替换为：

    var dirValuesStore = Ext.create('Ext.data.Store', {
        fields: ['id', 'name'],
        data: [
            {id: 'all', name: 'All'},
            {id: '1', name: 'Name 1'},
            {id: '2', name: 'Name 2'},
            {id: '3', name: 'Name 3'},
            {id: '4', name: 'Name 4'}
        ]
    })

你会看到它有效！

Answer 9

在Extjs 5.0.1中，这应该在config combo中起作用：

...
editable: false,
forceSelection: true,
emptyText: '',

Extjs 4组合框默认值

9 个答案: