Значение по умолчанию extjs 4 combobox

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

Я заметил, что ваш конфигуратор Combo имеет queryMode: 'local'. Это значение предназначено для того, когда ваши данные хранятся локально в массиве. Но ваша модель использует прокси AJAX. Может быть, это смущает Ext, чтобы он не мог найти значение по умолчанию, которое вы пытаетесь установить? Попробуйте удалить queryMode, чтобы по умолчанию было значение 'remote' (или установить его явно).

UPDATE: я переносил свое приложение из Ext3 в 4 сразу после публикации выше, и я столкнулся с той же проблемой. Я уверен, что queryMode является его частью, но главная проблема заключается в том, что у combobox нет данных, необходимых в то время, когда они отображались. Установка 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);
        }
    }
    ...
})

Ответ 4

Лучший способ сделать это - прослушать событие 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 possible to query from combobox store also.
           //For example: store.getAt('0').get('id'); according to Brik answer.
           this.setValue(this.defaultValue);    
        }
    }
});

Ответ 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/property на вашем комбо-объекте должно быть установлено в какое-то значение, поэтому поле со списком получает начальное значение. Вы уже это сделали. Значение "все" также должно быть в вашем магазине, прежде чем оно установит его как значение по умолчанию.

value: 'all'

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

Ответ 6

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

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

Это, вероятно, после config Ext.apply(this, {items: [..., {xtype: 'combo', ...}, ...]}) в некотором компоненте initComponent().

Ответ 7

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

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

Ответ 8

Указание параметра "значение" в конфиге - это правильный способ установки значений по умолчанию для списков со списком.

В вашем примере просто установите forceSelection:false, он будет работать нормально.

Если вы хотите установить forceSelection:true, вы должны убедиться, что данные, возвращенные из вашего хранилища, содержат элемент, который имеет значение, равное вашему значению по умолчанию (в данном случае это все). В противном случае это будет пустой текст по умолчанию. Чтобы быть более ясным, замените определение 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'}
        ]
    })

Вы увидите, что он работает!

Ответ 9

В Extjs 5.0.1 это должно работать в config combo:

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