Showing posts with label ExtJs ComboBox. Show all posts
Showing posts with label ExtJs ComboBox. Show all posts

Thursday, August 8, 2013

Extjs combobox:How to set user selected value as the default selected value

 /* Date store */
var dataStore = new Ext.data.JsonStore({
    proxy: new Ext.data.HttpProxy({
        url: Ext.SERVER_URL + 'get_data',
        method: 'post'
    }),
    listeners :{
        load:function() {
            /**
            /* The code block at the end labeled
            /* 'And select a value after load store' can be written here.
            */
        }
    },
    fields: ['id',  'name'],
    totalProperty: 'totalCount',
    root: 'data'
});

/* Suppose data returned as */
{totalCount: 2, data:  [{"id":1,"name":"First Item"},{"id":2,"name":"Second Item"}] }

/* Combobox initialize */
{
    xtype: 'combo',
    id: "domId",
    fieldLabel: 'Data Name',
    hiddenName: 'cb_data',
    store: dataStore,
    displayField: 'name',
    labelSeparator :'',
    valueField: 'id',
    typeAhead: true,
    autoSelect: true,
    mode: 'local',
    triggerAction: 'all',
    selectOnFocus: true,
    allowBlank: true,
    blankText: 'Select status',
    editable: false
}

/* And select a value after load store */
var combo = Ext.getCmp("domId");
combo.getStore().on(
    "load",function() {
        var value = 2;
        /* Set your value to select in combobox */
        /* This will select with id = 2 and label = 'Second Item'.
        if(value == 0) { /* Default selection */
            var recordSelected = combo.getStore().getAt(0);
            combo.setValue(recordSelected.get('id'));
        } else {
            combo.setValue(value);
        }
    },
    this,
    {
        single: true
    }
); 

Thursday, November 29, 2012

ExtJS ComboBox with local store and change action listener.

new Ext.form.ComboBox({
    fieldLabel: '',
    id: 'searchtypeforcontacts',
    name: 'searchtype',
    x:200,
    labelSeparator :'',
    editable: false,
    store: new Ext.data.SimpleStore({
        fields: ['id', 'header'],
        data: [
            ['id', 'Contact Id'],
            ['first_name', 'Given Name'],
            ['email', 'Email'],
            ['country', 'Country'],
            ['state', 'State'],
            ['suburb_city', 'Suburb/City'],
            ['post_zip_code', 'Post/Zip Code']
        ]
    }),
    displayField: 'header',
    valueField: 'id',
    emptyText:'Search Contacts',
    typeAhead: true,
    mode: 'local',
    anchor: '40%',
    triggerAction: 'all',
    allowBlank: false,
    selectOnFocus: true,
    blankText: 'Select search type',
    listeners:{
        'select':function() {
            if (this.value == 'status') {
                //statusCombo.show();
                searchText.hide();
                $(".customerSearch").css({'margin-left':'210px','width':'auto'});
            } else {
                //statusCombo.hide();
                searchText.show();
                $(".customerSearch").removeAttr("style").css("width:auto;");
            }
        }
    }
})