Extjs 4組合框默認值



Answers

添加loading: true到您的商店配置將修復它。 autoLoad: true似乎存在問題autoLoad: trueforceSelection: true 。 即使負載功能還沒有被解僱,這個小黑客也會讓你的組合框相信商店正在加載。

Question

我正在將我的應用程序從ExtJs 3遷移到4版本。 我在formPanel上有幾個組合框,之前我使用了hiddenName和所有這些stuff來提交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
}



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

你會看到它有效!




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



我敢打賭,這與您(異步)加載組合框的時間以及設置組合框的值的時間有關。 要解決這個問題,只需執行以下操作:

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', ...}, ...]})之後。






Related