Extjs 4 combobox默认值

Question

我将我的应用程序从ExtJs 3迁移到4版本。 我有几个组合框在我的formPanel，以前我用隐藏名称 和所有stuff提交valueField而不是displayField。

我的所有适应都可以正常工作（值域是提交），但我无法设置组合框的默认值，它们在页面加载后显示为空。 以前，我只是在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

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

更新：发布上述内容后，我正在将自己的应用从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 2

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

我加入这行添加项目到店里后，它工作正常：

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

Answer 3

我敢打赌，这是与时间，你（异步）加载组合框做的，到时候你设置的值的组合框。要解决此问题，请执行以下操作：

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();。

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

Answer 4

试试这个代码：

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

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

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

对于那些阅读，你的 '二合一' 的值配置/性能对象应设置为某个值，以便组合框获得初始值。你已经做到了。值“all”也需要在您的商店中，然后才会将其设置为默认值。

value: 'all' 

此外，这是很好的做法，设置了valueField配置，您已经做了值。如果你不这样做，那么在调用combo.getValue（）时，select监听器将不会得到正确的值。

Answer 6

执行此操作的最佳方法是，监听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 7

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

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这应该工作，在配置组合：

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