Extjs Combo - Why combo is loading while I have not created form include combo

Question

I define a window include a form and some field and combo box. Example like

    Ext.define('Ext.example.ABC', {
        extend: 'Ext.window.Window',   
        items:{
            xtype:'form',
            items:[
            {
            xtype: 'combo',
            id: 'example',
            name: 'ax',
            triggerAction:  'all',
            forceSelection: true,
            editable:       false,
            allowBlank: false,
            fieldLabel:     'example',
            mode: 'remote',
            displayField:'name',
            valueField: 'id',
            store: Ext.create('Ext.data.Store', {
                            fields: [
                                {name: 'id'},
                                {name: 'name'}
                            ],
                            autoLoad: true,
                            proxy: {
                                type: 'ajax',
                                url: 'example.php',
                                reader: {
                                    type: 'json',
                                    root: 'rows'
                                }
                            }
                }
            })
            }]
         }
         ,load: function(a) {
              // do some thing
         }
});

And I have a button in a grid panel

tbar:[
        {    
            text:'create',
            handler:function(){
                         var x = new Ext.example.ABC();
                 x.load(0);

            }
        }

But Why when i just start gridpanel then combo also load while I have not click button create.
I have many combo box and that make my grid panel load slowly :(
How can i fix that thanks

Andron · Accepted Answer · 2013-07-10T08:32:31.733

I guess you need set autoLoad: false config option for your combobox's store.

In relation to your comments - I've created an example. You can check it on jsFiddle.
It was created on ExtJs 3.4, but I think for 4.x it will be not very different.

var arrTestData = [
    ['AL', 'Alabama', 'The Heart of Dixie'],
    ['AK', 'Alaska', 'The Land of the Midnight Sun'],
    ['AZ', 'Arizona', 'The Grand Canyon State'],
    ['AR', 'Arkansas', 'The Natural State'],
    ['CA', 'California', 'The Golden State']
];

var combosCount = 5;
var arrItems = [];
for (var i = 0; i < combosCount; i++) {
    var comboId = Ext.id();

    // simple array store
    var store = new Ext.data.ArrayStore({
        parentCombo: comboId,
        fields: ['abbr', 'state', 'nick'],
        data : []
    });

    store.on('load', function() {
        var combo = Ext.getCmp(this.parentCombo);
        combo.setValue(combo.defaultValue);
    });

    var combo = new Ext.form.ComboBox({
        id: comboId,
        fieldLabel: 'Combobox #' + (i + 1),
        store: store,
        displayField:'state',
        valueField:'abbr',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'Select a state...',
        defaultValue: arrTestData[i][0],
        selectOnFocus:true
    });
    arrItems.push(combo);
}

var formPanel = new Ext.form.FormPanel({
    bodyStyle: 'padding:5px;',
    items: arrItems,
    renderTo: 'combos-container'
});


new Ext.Button({
    text: 'Do all cool things',
    renderTo: 'combos-btn',
    handler: function() {
        var arrCombos = formPanel.findByType('combo');
        Ext.each(arrCombos, function(combo){
            combo.getStore().loadData(arrTestData);
        });
    }
});

So what we do there:
1. For each store we'll save parent combobox id - this is required to identify related combobox.
2. For each combobox we save own parameter - defaultValue. This is the value we want set as default after store will be loaded.
3. Listen for 'load' event and set default value for the combo.

I hope this is what you was waiting for :)

But i want set a default value If set autoLoad: false then nothing :( — DeLe, Jul 09 '13 at 13:31
You can set default value for the combobox by using `value` config option. At that time store must have all required data. I think you need to run manually store loading and when it will receive data -> set value to the combo. — Andron, Jul 09 '13 at 15:29
Do u have any example? b/c i have many combo box (about 5) :( — DeLe, Jul 09 '13 at 15:40
I think your edit so cool but i using url to get data. Can u make a dialog wait for all combo load done? . Thanks so much — DeLe, Jul 16 '13 at 13:00
I'm not sure what's wrong. We load data to the comboboxes separately. E.g. you can use `autoload` + real url. For each store we listen for `load` event and this means that we'll run our code only when data will be received. If you want don't automatically load comboboxes -> set `autoLoad` to `false` for each store of the comboboes. And run `store.reload()` when you need. — Andron, Jul 16 '13 at 13:22
So have you tried what I've wrote? Please mark my answer as resolved if it was helpful :) — Andron, Jul 18 '13 at 07:57

score 0 · Answer 2 · answered Jul 15 '13 at 11:34

0

Have autoLoad:false and load your store manually for default values. When you really want to load the store, you can do

store.load()

which will load your store for default values.

answered Jul 15 '13 at 11:34

Jalin Gladis

113
1
9

But Have anyway to catch when all my store (combo) loading done? I have many combo (some combo maybe dynamic) :( – DeLe Jul 15 '13 at 13:18
Refer [link](http://stackoverflow.com/questions/11003605/how-to-wait-until-all-stores-are-loaded-in-extjs) – Jalin Gladis Jul 16 '13 at 12:54

Extjs Combo - Why combo is loading while I have not created form include combo

2 Answers2