Extjs Combo - How to load value to combo using GetForm().load

Question

I have a combo box inside a form like:

        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: false,
                        proxy: {
                            type: 'ajax',
                            url: 'example.php',
                            reader: {
                                type: 'json',
                                root: 'rows'
                            }
                        }
            }
        })

I don't want that auto load because that's slow when i start.

But i want set a value to combo box when i click edit button and load value to combo

this.down('form').getForm().load({            
       url: 'load.php',
       success:function(){
       }
    });

data from load.php like (name of combe is ax)

{ success:true , data : { ax: '{"id":"0","name":"defaults"}' } }

But that's not working. How can i do that thanks.

p/s: If i have autoLoad : true and data is { success:true , data : { ax: '0' } } that's work well. But that's slow when i start.

Mike Mike · Accepted Answer · 2013-07-09T11:11:11

What you want to do is make sure the combo is loaded before you try to set it's value.

You could check if the combo's store has any data in it:

if(combo.getStore().getCount() > 0)
{
   //the store has data so it must be loaded, you can set the combo's value
   //doing a form.load will have the desired effect
}
else
{
  //the store isn't loaded yet! You can't set the combo's value
  //form.load will not set the value of the combo
}

If it does, you can just set the value. But more likely however it will not have been loaded.

You could also do something like this

//in the controller's init block
this.control({
  "#myEditButton" : {click: this.loadForm}
});

//a function in your controller
loadForm: function(button)
{
   var combo; //get your combo somehow, either via references or via the button 
   combo.getStore().load({
   scope: this,
   callback: 
     function(records, operation, success)
     {
        if(success)
        {
           //load your form here
        }
     }
   });
}

I know that might seem like a lot of code, but it's the only way to know for sure if the combo was loaded. If it is not, you cannot set it's value.

A third option would just be to explicitly load the store before you open your view.

Extjs Combo - How to load value to combo using GetForm().load

1 Answers