1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    6
    Vote Rating
    0
    demonraiser is on a distinguished road

      0  

    Default Answered: ComboBox does not reflect updated store

    Answered: ComboBox does not reflect updated store


    I need to dynamically update data in a ComboBox from another store.
    Code:
    var comboStore = myCombo.store;
    // replacing the curent store data with that of the other store
    comboStore.loadData(otherstore.getRange(), false);
    // hopefully my ComboBox will refresh
    comboStore.load();
    I can see that the store has updated with the new data. But on expanding the combo-box, it still shows the old values.

    How do I reflect the updated store data in the ComboBox view?

  2. FYI: I tried to simulate your case with the following example to switch combo's store between two stores and everything works well.
    Code:
    Ext.onReady(function(){
        var current = 0;
        var store = [];
        store[0] = Ext.create('Ext.data.Store', {
            fields: ['f1', 'f2'],
            data  : [
                {f1: 1, f2: 1},
                {f1: 2, f2: 2}
            ]
        });    
        store[1] = Ext.create('Ext.data.Store', {
            fields: ['f1', 'f2'],
            data  : [
                {f1: 'a', f2: 'a'},
                {f1: 'b', f2: 'b'}, 
                {f1: 'c', f2: 'c'}, 
                {f1: 'd', f2: 'd'}  
            ]
        });
        var combo = Ext.create('widget.combobox', {
            renderTo: Ext.getBody(),
            store   : {
                fields: ['f1', 'f2'],
                data  : []
            },
            displayField: 'f2',
            valueField: 'f1',
            queryMode: 'local'
        });
        Ext.create('widget.button', {
            renderTo: Ext.getBody(),
            text: 'Switch store',
            handler: function(){
                combo.store.loadData(store[current++ % 2].getRange(), false);
            }
        });
    });

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please see the following:

    Code:
    xtype: 'combo',
    listeners: {
        beforequery: function(qe){
            delete qe.combo.lastQuery;
        }	    	
    }
    Regards,
    Scott.

  4. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    6
    Vote Rating
    0
    demonraiser is on a distinguished road

      0  

    Default


    I added the listener to my combo, and it was getting called every time I expand the combo. BUT on debugging, I observe that the lastQuery property is never there to delete. The ComboBox still shows old data.

    I am using a ArrayStore inside the combo, all my changes are local.
    Is
    comboStore.loadData(otherstore.getRange(), false);
    the correct way to copy the content of one ArrayStore into another?

    I have noticed another strange thing while debugging:
    comboStore.data.items reflect the update data records, but comboStore.totalCount property still shows the previous number of records.

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Code:
    var comboStore = myCombo.store;
    // replacing the curent store data with that of the other store
    comboStore.loadData(otherstore.getRange(), false);
    // hopefully my ComboBox will refresh
    comboStore.load();
    Why do you call comboStore.load() after calling comboStore.loadData()? This will override what you will do with previous comboStore.loadData().

    Let have a try by commenting out comboStore.load().
    Code:
    var comboStore = myCombo.store;
    // replacing the curent store data with that of the other store
    comboStore.loadData(otherstore.getRange(), false);
    // hopefully my ComboBox will refresh
    //comboStore.load();

  6. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    6
    Vote Rating
    0
    demonraiser is on a distinguished road

      0  

    Default


    Ok, removed that line. Just using

    Code:
    var comboStore = myCombo.store;
    comboStore.loadData(otherstore.getRange(), false);
    No changes. The ComboBox still shows old data on expanding.

    When I debug into the coe and break right after loadData(), I see the comboStore.data is updated, BUT data in comboStore.proxy.data shows old data. How do I update the proxy data (or better, disable the damn proxy)?

    Thanks for the responses btw.

  7. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    FYI: I tried to simulate your case with the following example to switch combo's store between two stores and everything works well.
    Code:
    Ext.onReady(function(){
        var current = 0;
        var store = [];
        store[0] = Ext.create('Ext.data.Store', {
            fields: ['f1', 'f2'],
            data  : [
                {f1: 1, f2: 1},
                {f1: 2, f2: 2}
            ]
        });    
        store[1] = Ext.create('Ext.data.Store', {
            fields: ['f1', 'f2'],
            data  : [
                {f1: 'a', f2: 'a'},
                {f1: 'b', f2: 'b'}, 
                {f1: 'c', f2: 'c'}, 
                {f1: 'd', f2: 'd'}  
            ]
        });
        var combo = Ext.create('widget.combobox', {
            renderTo: Ext.getBody(),
            store   : {
                fields: ['f1', 'f2'],
                data  : []
            },
            displayField: 'f2',
            valueField: 'f1',
            queryMode: 'local'
        });
        Ext.create('widget.button', {
            renderTo: Ext.getBody(),
            text: 'Switch store',
            handler: function(){
                combo.store.loadData(store[current++ % 2].getRange(), false);
            }
        });
    });

  8. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    6
    Vote Rating
    0
    demonraiser is on a distinguished road

      0  

    Default


    Thanks vietits, on looking at your code, I realized that I had set mode instead of queryMode to local.

    Once I fixed that, it all worked fine. I shall read the documentation more carefully next time.

  9. #8
    Sencha User
    Join Date
    Jul 2012
    Location
    bangalore
    Posts
    18
    Vote Rating
    0
    loki4u is on a distinguished road

      0  

    Default


    Hi

    Please make sure your displayfield value in combobox and fieldname in model should be same.
    Code:
                                    {                 
                                          xtype:'combobox'
                                            ,itemId:'productucomboid'
                                            ,emptyText:'Choose a Product'
                                            ,store: 'Products'
                                            ,displayField: 'name' //should be same in model or will not display anything in combo
                                            ,valueField: 'productId'
                                            ,queryMode: 'local'
                                            
                                        }
    Ext.define('yourApp.model.Product', {
        extend: 'Ext.data.Model',
       fields:['productId','name','company_id','email','productdesc','createdTime'],
       idProperty : 'productId'
    });