CODEWITHSUNDEEP
ajaxjsonjspservletsextjs
Sriniketh
Sriniketh

Reputation: 55

Load JSON into ComboBox in ExtJS

I am new to both jsp and ExtJS. I have a jsp file from which am sending an AJAX request to a servlet. The servlet returns a JSON as a String. After receiving the JSON, i have to populate a ComboBox. Though the servlet is returning the JSON, my ComboBox is unable to load the data.

Here are some snippets from my code.

The servlet code to generate the JSON:

            ...

            String sql = "SELECT DISTINCT category FROM ProductTable ORDER BY category";
            ResultSet rs = stmt.executeQuery(sql);
            JSONArray list = new JSONArray();
            while (rs.next()) {
                JSONObject obj = new JSONObject();
                String cat = rs.getString("category");
                obj.put("category", cat);
                list.add(obj);
            }
            JSONObject resultObject = new JSONObject();
            resultObject.put("result", list);
            StringWriter output = new StringWriter();
            resultObject.writeJSONString(output);
            String jsonText = output.toString();
            System.out.print(jsonText);

            ...

            response.setContentType("text/plain");
            response.getWriter().write(jsonText);

The jsp code:

    ...

    $.get('LoadDropDown', {
        label : "category"
    }, function(responseText) {
        JSONForCategory = Ext.JSON.decode(responseText);
        console.log(JSONForCategory);
    });

    ...

    {
        xtype : 'combo',
        fieldLabel : 'Category',
        name : 'category',
        displayField : 'category',
        valueField : 'category',
        mode : 'local',
        triggerAction : 'all',
        store : new Ext.data.JsonStore({
            autoLoad : true,
            data : JSONForCategory,
            root : 'result',
            fields : [ 'category' ]
            })
    }

Could someone please tell me where am going wrong?

Thanks in advance.

Upvotes: 0

Views: 1424

Answers (2)

Phoenix
Phoenix

Reputation: 1530

You can load your json file using data-options in html tag by using the following method.

<input class="easyui-combobox" name="language" style="width:50%"
        data-options="
            url: 'combobox_data2.json', /* load your json file name */
            method: 'get',
            valueField:'value',
            textField:'text',
            groupField:'group'
        ">

Check Combo Box for reference.

Hope this will help you.

Upvotes: 0

dReAmEr
dReAmEr

Reputation: 7194

I would suggest to keep reference of data store like below.

var dataStore = new Ext.data.JsonStore({
            autoLoad : true,
            data : JSONForCategory,
            root : 'result',
            fields : [ 'category' ]
});

Then you can refer to it from your combo box like below.

{
        xtype : 'combo',
        fieldLabel : 'Category',
        name : 'category',
        displayField : 'category',
        valueField : 'category',
        mode : 'local',
        triggerAction : 'all',
        store : dataStore 

}

and then from your ajax callback function,you can load the data to store like below.

JSONForCategory = Ext.JSON.decode(responseText);
console.log(JSONForCategory);
dataStore.loadData(JSONForCategory);

Upvotes: 2

Related Questions