Valore predefinito di combobox Extjs 4


Answers

Aggiunta del loading: true alla tua configurazione del negozio lo risolverà. Sembra esserci un problema con autoLoad: true e forceSelection: true . Questo piccolo trucco farà credere al tuo combobox che il negozio si sta caricando anche se la funzione di caricamento non è stata ancora attivata.

Question

Sto migrando la mia applicazione dalla versione 3 a 4 di ExtJs. Ho diversi combobox sul mio formPanel, e in precedenza ho usato hiddenName e tutte quelle cose per inviare valueField invece di displayField.

Tutto il mio adattamento funziona bene (campo di valori che sto inviando), ma non posso impostare i valori predefiniti per le caselle combinate, sono mostrati come vuoti dopo il caricamento della pagina. Precedentemente, l'ho fatto solo specificando il parametro 'value' in config. C'è qualche idea su come risolverlo?

Il mio codice: modello e archivio:

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

Config combo:

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



Il modo migliore per farlo è ascoltare l'evento afterrender e quindi impostare il valore predefinito nella funzione di callback.

Vedi questo codice:

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



Scommetto che questo ha a che fare con il tempo in cui (in modo asincrono) si carica la casella combinata e la volta che si imposta il valore della casella combinata. Per ovviare a questo problema, fai semplicemente questo:

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

Il caricamento automatico del negozio è disattivato. Ora, dopo aver collocato il tuo ComboBox in un certo posto, usando il codice nel tuo post di partenza, devi semplicemente caricare lo store manualmente: dirValuesStore.load(); .

Questo è probabilmente dopo la configurazione di Ext.apply(this, {items: [..., {xtype: 'combo', ...}, ...]}) in initComponent() alcuni componenti.




La specifica del parametro 'value' nella configurazione è un modo corretto per impostare i valori predefiniti per le caselle combinate.

Nel tuo esempio, imposta semplicemente forceSelection:false , funzionerà forceSelection:false .

Nel caso in cui desideri impostare forceSelection:true , dovresti assicurarti che i dati restituiti dal tuo negozio contengano un oggetto che abbia il valore uguale al tuo valore predefinito ("tutti" in questo caso). In caso contrario, sarà un testo vuoto per impostazione predefinita. Per essere più chiaramente, per favore sostituisci la definizione di dirValuesStore con questa:

    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'}
        ]
    })

Lo vedrai funziona!