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: '',