Extjs 4 combobox standaardwaarde

stemmen
26

Ik ben het migreren van mijn toepassing van ExtJs 3-4 versie. Ik heb een aantal comboboxes bij mijn FormPanel kan voorkomen, en eerder ik heb gebruikt hiddenName en al dat spul te valueField plaats van displayField dienen.

Al mijn aanpassing werkt prima (waarde veld indienen), maar ik kan niet zet de standaard waarden voor comboboxes, worden ze getoond als leeg na pagina te laden. Vroeger deed ik dat alleen met het opgeven van de parameter 'waarde' in config. Is er enig idee hoe dat op te lossen?

Mijn code - Model en Store:

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

Combo config:

{
    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
}
De vraag is gesteld op 11/05/2011 om 12:55
user
In andere talen...                            


9 antwoorden

stemmen
4

Ik heb gemerkt dat je Combo config heeft queryMode: 'local'. Die waarde is bedoeld voor wanneer uw gegevens lokaal worden opgeslagen in een array. Maar uw model maakt gebruik van een AJAX proxy. Zou het kunnen dat dit verwart Ext kan dus niet de standaard waarde die u probeert in te stellen te vinden? Probeer te verwijderen queryModezodat het in gebreke blijft om de waarde van 'remote' (of instellen expliciet.)

UPDATE: Ik was het migreren van mijn eigen app van ext3 tot 4 direct na het plaatsen van de bovenstaande, en ik liep in het exact hetzelfde probleem. Ik weet zeker dat queryModeer deel van uit, maar het belangrijkste probleem is dat de combobox de gegevens nog nodig is op het moment dat het is gemaakt heeft. Instelling valuedoet geef het een waarde, maar er is niets in de gegevens op te slaan maar om het te koppelen aan, zodat het veld leeg lijkt. Ik ontdekte dat de autoLoadwoning kan ook een callback functie moet worden gebruikt wanneer de gegevens worden geladen. Hier is wat je zou kunnen doen:

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);
        }
    }
    ...
})
antwoordde op 15/07/2011 om 20:15
bron van user

stemmen
17

Ik had hetzelfde probleem, afaik heeft te maken met SelectList rendering voor de items worden toegevoegd aan de winkel. Ik probeerde de bovengenoemde zonder enig geluk callback methode (denk dat het zou hebben om een ​​callback op de SelectList in plaats van de winkel).

Ik voegde deze lijn na het toevoegen van items naar de winkel en het werkt prima:

Ext.getCmp('selectList').setValue(store.getAt('0').get('id'));
antwoordde op 18/08/2011 om 08:38
bron van user

stemmen
0

Ik wed dat dit heeft te maken met de tijd die je (asynchroon) laadt de combobox, en de tijd dat je de waarde van de combobox te stellen. Om dit probleem op te lossen, dit gewoon doen:

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

Autoloading van de winkel is uitgeschakeld. Nu, nadat u uw keuzelijst heeft geplaatst op een bepaalde plaats - met behulp van de code in je eerste post - je gewoon de winkel handmatig te laden: dirValuesStore.load();.

Dat is waarschijnlijk na de config Ext.apply(this, {items: [..., {xtype: 'combo', ...}, ...]})in sommige component initComponent().

antwoordde op 30/11/2011 om 11:26
bron van user

stemmen
0

Probeer deze code:

var combo = new Ext.form.field.ComboBox({
    initialValue : something,
    listeners: {
        afterrender: function(t,o ) {
           t.value = t.initialValue;    
        }
    }
}) 
antwoordde op 03/12/2011 om 21:22
bron van user

stemmen
3

U kunt zet de logica rechtstreeks in de callback, of het opzetten van een functie om alle winkels af te handelen.

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

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

Voor degenen die lezen, de waarde moet config / woning op uw 'combo' object worden ingesteld op een bepaalde waarde, zodat de keuzelijst krijgt een initiële waarde. U heeft dit al gedaan. De waarde 'all' moet ook in uw winkel voordat hij het zal ingesteld als de standaard.

value: 'all'

Ook is het een goede gewoonte om een waarde in te stellen voor de valueField config, die je al hebt gedaan. Als je dat niet doet, zal de selecte luisteraar niet de juiste waarde te krijgen bij het aanroepen combo.getValue ().

antwoordde op 20/09/2012 om 00:49
bron van user

stemmen
5

De beste manier om dit te doen is dat luisteren naar de afterrendergebeurtenis en stel de standaard waarde in de callback functie.

Zie deze code:

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);    
        }
    }
});
antwoordde op 06/01/2013 om 08:31
bron van user

stemmen
10

Het toevoegen loading: trueaan uw winkel config zal het te repareren. Er lijkt een probleem te zijn met autoLoad: trueen forceSelection: true. Deze kleine hack zal uw combobox geloven dat de winkel wordt geladen, zelfs als de belasting-functie is nog niet ontslagen.

antwoordde op 21/01/2013 om 12:13
bron van user

stemmen
0

Het opgeven van de parameter 'waarde' in de config is een correcte manier om de standaard waarden voor comboboxes.

In uw voorbeeld, stel gewoon forceSelection:false, het zal prima werken.

In het geval dat u wilt instellen forceSelection:true, moet u ervoor zorgen dat de gegevens terug van uw winkel bevat een item dat de waarde gelijk aan uw standaard waarde ( 'all' in dit geval) .Anders heeft, zal het een lege tekst standaard zijn. Om duidelijker te zijn, vervang dan uw dirValuesStoredefinitie van deze:

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

U zult zien dat het werkt!

antwoordde op 05/06/2013 om 08:11
bron van user

stemmen
0

In Extjs 5.0.1 zou deze werken, in config combo:

...
editable: false,
forceSelection: true,
emptyText: '',
antwoordde op 25/08/2014 om 05:32
bron van user

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more