ExtJS 3.4 : set combo store from ajax response

Question

I have an ExrJs combo.

new Ext.form.ComboBox({
        //store : myStore,
        //displayField : 'code',
        //valueField : 'code',
        fieldLabel : 'Tour Code',
        id : 'idTourCode',
        //allowBlank : false,
        typeAhead : true,
        forceSelection : true,
        mode : 'local',
        triggerAction : 'all',
        selectOnFocus : true,
        editable : false,
        hidden : false,
        disabled : true,
        minChars : 1,
        hideLabel : true,
        style : 'marginleft:10px',
        width : 361,
        emptyText : 'Tour Code'
        //flex : 1
    });

And I send an Ajax request and retrieve data from postgresql database and tried to set this response as the store of the combo as following.

var jsonData = Ext.util.JSON.decode(response.responseText);
                            console.log(jsonData);
                            if (jsonData.tourRef.length > 0) {
                                Ext.getCmp('idTourCode').bindStore(jsonData.tourRef);
                                Ext.getCmp('idTourCode').setRawValue(jsonData.tourRef.code);
                                Ext.getCmp('idTourCode').setHiddenValue(jsonData.tourRef.code);
                            }

My response is like this.

{'tourRef':[{ 'code' : '16/01/2014 17:31:03-ROUTE 5(COLOMBO 08,10)' } , { 'code' : '21/01/2014 10:27:54-ROUTE 5(COLOMBO 08,10)' }  ]}

Now the combo has two empty lines and firebug console says Ext.getCmp('idTourCode').setHiddenValue(jsonData.tourRef.code);

I am using ExtJs 3.4

What's wrong with my codes and how can I fix it.

Kind regards

Ext.Ajax.request({
                          method: 'GET',
                          loadMask: true,
                          scope: this,
                          url: "http://" + host + "/" + projectName + "/"
                                + "TourReference",
                          success: function (response, request) {
                            Ext.MessageBox.alert('success', response.responseText);
                            var jsonData = Ext.util.JSON.decode(response.responseText);
                            console.log(jsonData);
                            if (jsonData.tourRef.length > 0) {
                                Ext.getCmp('idTourCode').bindStore(jsonData.tourRef);
                                Ext.getCmp('idTourCode').setRawValue(jsonData.tourRef.code);
                                Ext.getCmp('idTourCode').setHiddenValue(jsonData.tourRef.code);
                            }
                            Ext.Msg.show({
                                  title: 'Success',
                                  msg: 'success',
                                  buttons: Ext.MessageBox.OK,
                                  icon: Ext.MessageBox.INFO
                            });

                          },
                          failure: function (response, request) {
                            Ext.MessageBox.alert('failure', response.responseText);
                            Ext.Msg.show({
                                  title: 'Error',
                                  msg: 'error',
                                  buttons: Ext.MessageBox.OK,
                                  icon: Ext.MessageBox.ERROR
                            });
                          },
                          params : {
                            dateFrom : Ext.getCmp('fromDateCombo').getValue(),
                            dateTo : Ext.getCmp('toDateCombo').getValue(),

                          }
                     });

Answer 1

The code below should solve your problem. Sorry for my poor english in comments.

var host = '127.0.0.1',
    projectName = 'superTours';

new Ext.form.ComboBox({
    typeAhead : true,
    id: 'idTourCode', // this is VERY VERY bad. Try to don't use 'id' anywhere
    forceSelection : true,
    mode : 'local',
    triggerAction : 'all',
    selectOnFocus : true,
    editable : false,
    mode : 'local',
    triggerAction : 'all',
    disabled : true,
    hideLabel : true,
    style : 'marginleft: 10px;',
    width : 361,
    emptyText : 'Select a Tour Code',
    /* very important params below */
    valueField: 'code',
    displayField: 'code',
    store: {
        xtype: 'jsonstore',
        autoLoad: false, // I set this parameter to false to prevent automatical load data to store after combo render
        url: 'http://' + host + '/' + projectName + '/' + 'TourReference',
        root: 'tourRef',
        fields: [ 'code' ],
        listeners: {
            load: function(store, records, options) {
                console.log('Combo store: data loaded');
            },
            loadexception: function() {
                // error while loading data
                console.log(arguments);
            }
        }
    }
});

As I can see, your combo must be disabled. With store parameter 'autoLoad: false' it will not be loaded until you want to.

If you want to send date period to script, you should remove 'change' and 'select' listeners from datefields and add 'Show' button. This button will send datefield params to server. Add this code to button's handler:

handler:function(Btn) {
    var datefrom = Ext.getCmp('fromDateCombo').getValue(),
        dateto = Ext.getCmp('toDateCombo').getValue();
    Ext.getCmp('idTourCode').enable();
    Ext.getCmp('idTourCode').getStore().reload({
        params: {
            dateFrom: datefrom,
            dateTo: dateto
        }
    });
}