Extjs 4组合框默认值

9 回答

• 0

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

  我在向商店添加商品后添加了这一行，它运行正常：

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

  回复于 2024-04-27T23:20:21+08:00
• 10

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

  回复于 2024-04-27T23:20:21+08:00
• 5

  执行此操作的最佳方法是侦听 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);    
          }
      }
  });
  

  回复于 2024-04-27T23:20:21+08:00
• 0

  我注意到你的Combo配置有 queryMode: 'local' . 该值适用于将数据本地存储在数组中的情况 . 但是你的模型使用的是AJAX代理 . 难道这会混淆Ext所以它可以't find the default value you'重新尝试设置？尝试删除 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);
          }
      }
      ...
  })
  

  回复于 2024-04-27T23:20:21+08:00
• 0

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

  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'对象上的 value config / property应该设置为某个值，以便组合框获得初始值 . 你已经这样做了 . 值'all'也需要在您的商店中将其设置为默认值 .

  value: 'all'
  

  此外，最好为valueField config设置一个值，在调用combo.getValue（）时，select侦听器将无法获得正确的值 .

  回复于 2024-04-27T23:20:21+08:00
• 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', ...}, ...]}) 之后 .

  回复于 2024-04-27T23:20:21+08:00
• 0

  试试这段代码：

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

  回复于 2024-04-27T23:20:21+08:00
• 4

  在配置中指定'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'}
          ]
      })
  

  你会看到它有效！

  回复于 2024-04-27T23:20:21+08:00
• 18

  在Extjs 5.0.1中，这应该在config组合中有效：

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

  回复于 2024-04-27T23:20:21+08:00