pre-selecting value from dropdown (Combo box) in extjs?

Question

I have a combo box which displays item quantity. Based on item quantity selection i am displaying price value of the item. By default i am setting price value to first item value. However when i load the page, i want my combo box to display first item qty i.e 100.

enter image description here

Problem: it should load Qty : 100 rather loading blank

So i have a store defined as

Store =  new Ext.data.JsonStore({
        storeId: 'Store',
        root: 'storevalue',
        autoLoad: false,
        baseParams: { itemid: '${itemID!""}',
                      adjustPrice: '${adjustPrice}',
                      overrideShowPrice: '${overrideShowPrice}' },
        url: 'ListQtyPrice.epm',
        fields: [ 'qty', 'rawprice', 'displayPrice' ]
    });

Combo box to display Qty

 <#if Select>
         new DBEComboBox({
            name: 'orderqty',
            displayField: 'qty',
            valueField: 'qty',
            id: 'order-qty',
            store: Store,
            forceSelection: true,
            mode: 'remote',
            triggerAction: 'all',
            allowBlank: true, 
            listWidth: 202,
            triggerClass: 'orderqty-trigger', 
            width: 200
            ,defaultValue: 100
            ,listeners: {
                // for price adjustments
            }
         });
        </#if>


Store.load({
            callback: function() {
            alert("reached");
            Ext.getCmp('order-qty').setValue(Store.getAt(0).get('qty'));
            var oqc = Ext.getCmp('order-qty');
            var value = Ext.getCmp('order-qty').getValue();
            alert(" hey :" +value); 
            }
        });

Able to see hey: 100 in alert statements

egerardus egerardus · Accepted Answer · 2012-01-16T21:46:46

I've run into this problem a couple times. The only way I've actually gotten this resolved was to call setValue on the combobox after the store has loaded, you could just add a listener on the store, but that always seemed somewhat messy to me. I usually have a stand-alone event listener like this:

Store.on('load',function(store) {
    Ext.getCmp('order-qty').setValue(store.getAt('0').get('qty'));
});

EDIT: 18 Jan 2012

OK as mentioned here is a complete working example of ComboBox with a default value being set. This is done using ExtJS 4.02, should work fine with 4.07 though, not sure about 4.1.

Make sure you put your correct extjs path in the links (see brackets at the top of html), otherwise just put both combo-example and data.json at the same directory level and they should run fine:

data.json:

[
  {"value":1,"name":"Option 1"},
  {"value":2,"name":"Option 2"},
  {"value":3,"name":"Option 3"}
]

combo-example.html:

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    
        <title>Combo Box Example</title>
    <link rel="stylesheet" type="text/css" href="[your extjs path]/resources/css/ext-all.css">

    <script type="text/javascript" src="[your extjs path]/ext-all.js"></script>
    <script type="text/javascript" >

    Ext.onReady(function() {

        // the datastore
        var myStore = new Ext.data.Store({
            fields: ['value', 'name'],
            proxy: {
                type: 'ajax',
                url : 'data.json',
                reader: {
                    type: 'json'
                }
            },
            autoLoad: true
        });

        // a window to hold the combobox inside of a form 
        myWindow = Ext.create('Ext.Window', {
            title: 'A Simple Window',
            width: 300,
            constrain: true,
            modal: true,
            layout: 'fit',
            items: [{
                // the form to hold the combobox
                xtype: 'form',
                border: false,
                fieldDefaults: {
                    labelWidth: 75
                },
                bodyPadding: '15 10 10 10',
                items: [{
                    // the combobox
                    xtype: 'combo',
                    id: 'myCombo',
                    fieldLabel: 'A Label',
                    valueField: 'value',
                    displayField: 'name',
                    store: myStore,
                    //queryMode: 'local',
                    typeAhead: true,
                    forceSelection: true,
                    allowBlank: false,
                    anchor: '100%'
                },{
                    // shows the selected value when pressed
                    xtype: 'button',
                    margin: '10 0 0 100',
                    text: 'OK',
                    handler: function() {
                        alert('Name: ' + Ext.getCmp('myCombo').getRawValue() + 
                              '\nValue: ' + Ext.getCmp('myCombo').value);
                    }
                }]
            }]
        });
        // show the window
        myWindow.show();

        // function to give the combobox a default value
        myStore.on('load',function(store) {
            Ext.getCmp('myCombo').setValue(store.getAt('0').get('value'));
        });

    });

    </script>

    </head>
    <body>
    </body>
</html>

pre-selecting value from dropdown (Combo box) in extjs?

1 Answers