Extjs 4组合框默认值

Question

我正在将我的应用程序从ExtJs 3迁移到4版本.我在formPanel上有几个组合框,之前我使用了hiddenName和所有这些东西来提交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
});

组合配置:

{
    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);
        }
    }
    ...
})