Extjs 4 combobox значение по умолчанию

Question

Я перевожу свое приложение с версии ExtJs 3 на 4.У меня есть несколько выпадающих списков на моей панели FormPanel, и ранее я использовал hiddenName и все эти stuff для отправки valueField вместо displayField.

Вся моя адаптация работает нормально (поле значения отправляется),но я не могу установить значения по умолчанию для комбинированных списков, они отображаются пустыми после загрузки страницы.Ранее я делал это, просто указав параметр 'value' в config.Есть какие-нибудь идеи, как это исправить?

Мой код - Модель и магазин:

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

У меня была такая же проблема, afaik имеет отношение к рендерингу selectlist, прежде чем элементы будут добавлены в магазин.Я попробовал метод обратного вызова, упомянутый выше, без какой-либо удачи (думаю, это должен быть обратный вызов в списке выбора, а не в магазине).

Я добавил эту строку после добавления элементов в магазин, и она отлично работает:

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

Answer 2

Добавление loading: true в конфигурацию вашего магазина исправит это. Кажется, есть проблема с autoLoad: true и forceSelection: true. Этот небольшой взлом заставит ваш комбобокс поверить, что магазин загружается, даже если функция загрузки еще не активирована.

Answer 3

Лучший способ сделать это - прослушать событие 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 4

Я заметил, что ваш конфиг-конфиг имеет 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);
        }
    }
    ...
})

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

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

Для тех, кто читает, значение config / свойство вашего 'комбинированного' объекта должно быть установлено на какое-то значение, чтобы поле со списком получало начальныйзначение.Вы уже сделали это.Значение 'all' также должно быть в вашем магазине, прежде чем оно будет установлено по умолчанию.

value: 'all'

Кроме того, рекомендуется установить значение для конфигурации valueField , что вы уже сделали.Если вы этого не сделаете, прослушиватель select не получит правильное значение при вызове combo.getValue ().

Answer 6

В Extjs 5.0.1 это должно работать, в конфиге combo:

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

Answer 7

Указание параметра '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 8

Попробуйте этот код:

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

Answer 9

Могу поспорить, что это связано со временем (асинхронно) загрузки комбинированного списка и временем, в течение которого вы устанавливаете значение комбинированного списка.Чтобы решить эту проблему, просто сделайте следующее:

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

Автозагрузка магазина отключена.* * * * * * * * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * * * * * * * * * * * * *конфиг Ext.apply(this, {items: [..., {xtype: 'combo', ...}, ...]}) в некоторых компонентах initComponent().