ExtJS 4.1: how to set a preselected item in a combo box?

0
votes

I'm working with ExtJS 4.1, I need to create a combo box containing a list of customers and I'd like to set a specific pre-selected item in it, but I don't know how to do it. Here's the code to create my combo box:

xtype: 'combobox',
fieldLabel: 'customer',
name: 'customer_id',
allowBlank:false,
afterLabelTextTpl: required,
//data store
store: Ext.create('Ext.data.Store', {
    autoDestroy: true,
    model: 'customer_model',
    autoLoad: true,
    proxy: {
        type: 'ajax',
    url: 'load.php?item=customer',            
    reader: {
        type: 'json',
        successProperty: 'success',
        root: 'data'
    }
    }
}),
valueField: 'id',
displayField: 'company',
typeAhead: true,
queryMode: 'remote',
emptyText: ''

As you can see my combo box is filled by a data store, that data store is built on a data model called 'customer_model'. Here's the code for data model:

Ext.define('customer_model', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'int', name: 'id'},
        {type: 'string', name: 'company'},
        {type: 'string', name: 'vat'},
        {type: 'string', name: 'ssn'},
        {type: 'int', name: 'ref_id'}
    ]
});

Well, I'd like to configure my combo box so that a certain item, for instance the customer having id equals to 1, is automatically selected when the page is loaded. Can anyone help me ? Thanks in advance. Enrico.

5
extjsextjs4.1

5 Answers

3
votes

In Ext.js 3.2.1, you are able to do this:

combobox.setValue(id);

This assumes that the combobox is configured to use id as the valueField. Your code seems to indicate that this is the case. You would also need to have a reference to the id value that you want to set the value to. The caveat here is that you need to make sure that this code only executes after the model is loaded, otherwise the combobox won't have anything to display. You can ensure this by setting the combobox in the callback method of the ajax call or in the load event of the store.

I've looked into the documentation for Ext.js 4.1, and this method seems to still be there. I believe this should do the trick.

Edit: clarity

0
votes

Thanks to Christopher help I wrote a working version of my code, I've decided to post it here, maybe it could be useful for someone...:

buttons: [{
    text: 'Load',
    handler: function(){
        var form = this.up('form').getForm();
        var combobox = form.findField('ref_id_combo');
        formPanel.getForm().load({
            url: <?php echo "'update_loader.php?id=".$_GET['id']."&item=customer',"; ?>
            waitMsg: 'Loading...',
            success: function(form, action) {
                combobox.setValue(<?php echo  get_property_id("ref_id","customer",$_GET['id']);?>);
            }
        });
    }
 }
0
votes

Programatically with combo.setValue(val) or declaratively:

{
    xtype: 'combo',
    value: val,
    ...
}
0
votes

if you want to select the first value of a store you can do combo.select(combo.getStore().getAt(0)) it will select the value at index 0 of the combo store

0
votes

If you create your own store first, you can use afterrender: function(combo){}

listeners: {
    afterrender: function (combo) {
        var record = yourStore.getAt(0);
        var abbr= record.get('abbr');
        combo.setValue(abbr);
    }
}