extjs - Extjs 4 组合框默认值

Question

我正在将我的应用程序从 ExtJs 3 迁移到 4 版本。我的表单面板上有几个组合框，以前我使用 hiddenName 和所有这些东西来提交 valueField 而不是 displayField。

我所有的调整工作正常（值字段正在提交），但我无法设置组合框的默认值，它们在页面加载后显示为空。以前，我只是通过在 config.xml 中指定“值”参数来做到这一点。有什么想法可以解决这个问题吗？

我的代码 - 模型和商店：

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
}

score 23 · Accepted Answer

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

我在将商品添加到商店后添加了这一行，它工作正常：

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

score 13 · Accepted Answer

添加loading: true到您的商店配置将修复它。autoLoad: true和似乎有问题forceSelection: true。这个小技巧会让你的组合框相信商店正在加载，即使加载功能还没有被触发。

score 11 · Accepted Answer

最好的方法是监听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);    
        }
    }
});

score 5 · Accepted Answer

我注意到你的 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);
        }
    }
    ...
})

score 4 · Accepted Answer

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

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
    }
}

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

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

value: 'all'

此外，为valueField配置设置一个值是一种很好的做法，您已经完成了。如果不这样做，则在调用 combo.getValue() 时，选择侦听器将无法获得正确的值。

score 1 · Accepted Answer

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

在您的示例中，只需 set 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'}
        ]
    })

你会看到它有效！

score 1 · Accepted Answer

试试这个代码：

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

score 1 · Accepted Answer

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

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().

score 1 · Accepted Answer

在 Extjs 5.0.1 这应该可以工作，在配置组合中：

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

extjs - Extjs 4 组合框默认值

9 回答 9

Related

Reference