ExtJs Grid is not updating as per response text

Question

Please help me out in the below mentioned situation;

My java web application uses JSON as data-interchange format. While running; firebug(firefox) shows the response as well as JSON data as expected; but the grid is not updating as expected rather it comes blank. Below are the store and grid definition;

//Grid & Store definition

    var searchResultStore = Ext.create('Ext.data.JsonStore', {
    model : 'BookModel',
    proxy : {
        type : 'ajax',
        reader : {
            totalProperty : 'results',
            type : 'json',
            root : 'data'
        }
    },
    autoLoad : true
});

Ext.define('Library.SearchBookGrid', {
    extend : 'Ext.grid.Panel',
    alias : 'widget.SearchBookGrid',
    id : 'searchBookGrid',
    title : 'Books',
    closable : true,
    initComponent : function() {

        this.store = searchResultStore;

        this.columns = [ {
            xtype : 'gridcolumn',
            dataIndex : 'title',
            text : 'Title'
        }, {
            xtype : 'gridcolumn',
            dataIndex : 'authorName',
            text : 'Author'
        } ];


        this.callParent(arguments);
    }
});

There is a BOOK SEARCH ExtJS form; which calls a URL (/MyLibrary/Books?action=6) & the search form values are submitted as JSONDATA. The search result is assigned as to the store (searchResultStore) follows;

    Ext.Ajax.request({
        url : '/MyLibrary/Books?action=6', 
        headers: {'Content-Type':'application/json; charset=utf-8'},
        jsonData : Ext.JSON.encode(form.getValues()),
        params:{
        action : 6
        },
        method : 'POST',
        success : function(response, request) {
               searchResultStore.loadData(Ext.JSON.decode(response.responseText));
        },
        failure : function(results, request) {
                Ext.Msg.alert("Search..", "Please try again...!!");
        },
});

Did I miss anything or i am wrong in this codes......please help....!!!!

Thanks in advance...!!

the reader is only used on the store load ajax request, so for your own ajax request the data should be an array of elements. not inside a root data attribute, maybe that could be your problem — nscrob
Thanks for your reponse nscrob; you mean to say...the response text should have to be a JSONArray instead of JSONObject...please do rectify me...!! — Bikash Sahoo

nscrob nscrob · Accepted Answer · 2011-11-11T12:05:38

Given that i saw you put a reader on the store with the root data, i hope the json you use to load the data is not of that format.

loadData function expects an array of models, or an array of elements. like [{"id":1},{.... My concern is that you try to use the reader and your json looks like:

{"data":[{"id:1},{.....

Then again this might not be the problem. I hope it helps

EDIT well the problem is what i was trying to say in the first comment, The reader you set on the store is used only when loading the store by the load function. LoadData expects an array so if you want a quick fix try:

searchResultStore.loadData(Ext.JSON.decode(response.responseText).data);

But I suggest you use the store load method instead of an ajax request which will use the reader.

  searchResultStore.load({
    url : '/MyLibrary/Books?action=6', 
    jsonData : Ext.JSON.encode(form.getValues()),
    extraParams:{
    action : 6
    },
})

Check the docs for load function and see what params it can take

ExtJs Grid is not updating as per response text

1 Answers