ExtJS Displaying Default ComboBox Value

February 15th, 2011 by aditia rahman / 3 Comments  

     

In this sort post I want to share how to displaying default combobox value in ExtJS, I write this post because last week one of my friend asking how to do this, the condition are there is a data grid with edit button in the toolbar, when user choose one row in the grid and click the edit button, the window component with form inside it appear, to editing data.

strGroup2.load();
Ext.getCmp('txgroup_id').setValue(sel.data.group_id);

The problem is we have the combobox value but we want to display the matched record text, it displaying the value not the text, and for the illustration this the little example solution code.

var strGroup2 = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        fields: ['id', 'name'], root: 'groups'
    }),
    proxy: new Ext.data.HttpProxy({
        url: BASE_URL + 'group/ext_get_all', method: 'POST'
    })
});

strGroup2.load();

// grid component
var tbUsers = new Ext.Toolbar({
    items: [{
        text: 'Edit',
        id: 'tbUserEdit',
        handler: function() {
            var sm = gridUsers.getSelectionModel();
            var sel = sm.getSelected();
            Ext.getCmp('txgroup_id').setValue(sel.data.group_id);
        }
    }]
});

var formUserEdit = new Ext.FormPanel({
    frame: true,
    border: false,
    items: [{
        xtype:'fieldset',
        title: 'Login Detail',
        collapsible: true,
        autoHeight:true,
        defaultType: 'textfield',
        items: [{
            xtype: 'combo', fieldLabel: 'Group', width: 120,
            emptyText: 'Choose a group ...', allowBlank: false,
            mode: 'local', name: 'group_id', hiddenName: 'group_id',
            store: strGroup2, triggerAction: 'all',
            displayField: 'name', valueField: 'id',
            editable: 'false', id: 'txgroup_id'
        }]
    }]
    }
});

You can see on the code above, I assume the solution is the store have to be loaded when the page is loaded, not loaded when the edit button clicked, in my previous post about ExtJS simple user management, I’m not doing this so I have to tricking in the server side code. At least I know it right now.

        submit to reddit Delicious

3 Comments Leave a Comment Subscribe RSS

  • david says:

    interesting
    I will prove it in my project

  • pragya says:

    hi i wanted to know how to send the selected combo value in proxy url

    Ext.onReady(function() {
    Ext.QuickTips.init();

    var d = new Date();
    var newTime = d.format(“yyyy-mm-dd HH:MM:ss”);

    var deviceID;

    var proxy = new Ext.data.HttpProxy({

    url: ‘api/wordlist.php?id=’,
    method: ‘POST’

    });
    // Create a standard HttpProxy instance.

    var reader = new Ext.data.JsonReader({
    totalProperty: ‘total’,
    successProperty: ‘success’,
    idProperty: ‘id’,
    root: ‘data’,
    messageProperty: ‘message’ // <– New "messageProperty" meta-data
    }, [
    {name: 'id'},
    {name: 'value'},
    {name: 'word', allowBlank: false}
    ]);
    var combo = new Ext.form.ComboBox({
    store: new Ext.data.ArrayStore({
    autoDestroy: true,
    fields: ['value', 'name'],
    data : []
    }),
    displayField: ‘name’,
    valueField: ‘value’,
    typeAhead: true,
    mode: ‘local’,
    forceSelection: true,
    triggerAction: ‘all’,
    emptyText: ‘Select a device…’,
    selectOnFocus: true,
    width: 135,
    listeners:{
    ‘select’: function () {
    deviceID = this.value;
    alert(” deviceID “+ deviceID);
    store.setBaseParam(‘id’,deviceID);
    store.load({params:{id:deviceID, time:newTime}});
    },
    },
    getListParent: function() {
    return this.el.up(‘.x-menu’);
    },
    iconCls: ‘no-icon’ //use iconCls if placing within menu to shift to right side of menu
    });

    i want to send combo value to Ext.data.HttpProxy , please help

  • yhosi says:

    mas..aq mau nanya. bgmn kalau kasus diatas diganti dengan sebuah formPanel?
    jd salah satu item (anggap aja Textfield) dari sebuah FORM_TAMBAH_PASIEN diberi nilai default yg diambil dari query_database?
    jd textfield tersebut akan otomatis terisi saat user membuka form_tambah_pasien, dan field lainya diisi secara manual.

Leave a Comment