Question

I am having two combo box in my UI. The first combo box contains the list of country names and the second combo box contains list of states present in that country. From the first combo, when I select the country, then the name is sent to the servlet. Using the name, the DB is hit, list of state names are retrieved and converted into JSONObject. Now I am not able to pass this JSONObject back to the extjs file for populating the second combobox with list of states.

Here is the code for the js file:

    Ext.require('Ext.tab.*');
Ext.require('Ext.button.*');

Ext.define('Country',{
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'string' },
        { name: 'name', type: 'string' }
    ]
});

Ext.define('CountryCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.countrycombo',
    allowBlank: false,
    queryMode: 'local',
    valueField: 'id',
    displayField: 'name',
    store: {
        model: 'Country',
        data: [
            { id: 'China', name: 'China'},
            { id: 'Japan', name: 'Japan'},
            { id: 'Malaysia', name: 'Malaysia'}
        ]
    },
    listeners: {
        "select": function(obj){  
            Ext.Ajax.request({
                url: '/CellEditing/FormServlet',
                method: 'POST',
                params: {
                    data: obj.getValue()
                },
                success: function(obj){
                    alert('sucess');
                    var respText = eval('('+ obj.responseText +')');
                    alert(respText);
                },
                failure: function(obj){
                    alert('failure');
                }
            });                 
        }
    }
});

Ext.define('State',{
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ]
});

Ext.define('StateCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.statecombo',
    allowBlank: false,
    queryMode: 'local',
    valueField: 'id',
    displayField: 'name',
    store: {
        model: 'State',
        data:[]
    }
});

Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();
    Ext.widget('panel', {
        renderTo: 'pan1',
        title: 'Basic Panel',
        width:600,
        height:100,
        defaults: {
            bodyPadding: 10,
            border: false,
            xtype: 'panel',
            layout: 'anchor'
        },
        layout: 'hbox',
        items: [{
                  fieldLabel: 'Country',
                  xtype: 'countrycombo',
                  width: 234,
                  margin: '5 5 5 5'
               },{
                  fieldLabel: 'State',
                  xtype: 'statecombo',
                  width: 234,
                  margin: '5 5 5 5'
               }]            
    });  
});

Here is the servlet:

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
    // TODO Auto-generated method stub
    System.out.println("Inside Post");
    String selectedValue = req.getParameter("data");
    System.out.println(selectedValue);
    //This is the json string I want to send back to the UI
    //The format of this json is correct, I verifieded it printing in console.
    String jsonString = new StateHelper().getStates(selectedValue);
    //Below are the lines I am having the doubt, it is not correct.
    req.setAttribute("data", jsonString);
    req.getRequestDispatcher("combo.jsp").forward(req, resp);
}

combo.jsp is the file containing both the combo box. Running this code, I am getting the alert with “failure” message.

Its telling: syntax error in this line:

var respText = eval('('+ obj1.responseText +')');

Please let me know how to resolve this problem.

Answer 1

var respText = Ext.JSON.decode( obj.responseText );