Question

I tried to code EXTJS Grid using jsp. I modify the EXTJS example to get data from jsp page, but the data is not loaded.

Could you please help ?

grid js

<script type="text/javascript">

Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', './js/ux/');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.toolbar.Paging',
    'Ext.ux.PreviewPlugin',
    'Ext.ModelManager',
    'Ext.tip.QuickTipManager'
]);

Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();

   var store = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url: 'data.jsp'
    }),
    reader: new Ext.data.JsonReader({
        root: 'topics',
        totalProperty: 'totalCount',
        id: 'threadid'
    },
     [
       {name: 'title'},
       {name: 'postid'},
       {name: 'username'},
       {name: 'lastpost'},
       {name: 'excerpt'},
       {name: 'userid'},
       {name: 'dateline'},
       {name: 'forumtitle'},
       {name: 'forumid'},
       {name: 'replycount'},
       {name: 'lastposter'}        
   ]),
    baseParams: {
        abc: 123
    }
});   

    var pluginExpanded = true;
    var grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        title: 'ExtJS.com - Browse Forums',
        store: store,
        disableSelection: true,
        loadMask: true,       
        // grid columns
        columns:[{
            id: 'topic',
            text: "Topic",
            dataIndex: 'title',
            flex: 1,           
            sortable: false
        },{
            text: "Author",
            dataIndex: 'username',
            width: 100,
            hidden: true,
            sortable: true
        },{
            text: "Replies",
            dataIndex: 'replycount',
            width: 70,
            align: 'right',
            sortable: true
        },{
            id: 'last',
            text: "Last Post",
            dataIndex: 'lastpost',
            width: 150,            
            sortable: true
        }],
        // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        }),
        renderTo: 'topic-grid'
    });

    // trigger the data store load
    store.loadPage(1);
});
</script>

jsp, data.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"  pageEncoding="ISO-8859-1"%>

<%
String data = "{\"totalCount\":\"1\",\"topics\":[{\"title\":\"XTemplate with in EditorGridPanel\",\"threadid\":\"133690\",\"username\":\"kpr@emco\",\"userid\":\"272497\",\"dateline\":\"1305604761\",\"postid\":\"602876\",\"forumtitle\":\"Ext 3.x: Help\",\"forumid\":\"40\",\"replycount\":\"2\",\"lastpost\":\"1305857807\",\"lastposter\":\"kpr@emco\",\"excerpt\":\"Hi\"}]}";

out.println(data);

System.out.println(data);
%>

Answer 1

None of your json column titles seem to match up with your ExtJS model.

The model needs to have the same column names as the data so that it knows where to put the data.

UPDATE

I’m confounded by your store data model implementation. I’ve never seen it implemented as the second argument for a new JsonReader.

But because you are using baseParam config I assume that you are using ExtJS 3.x not 4.x and I am admittedly not very familiar with 3.x so that may be a legal data model implementation.

In ExtJS 4.x the data model is usually implemented as a separate object than the store, something like this:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'title',       type: 'string'},
        {name: 'postid',      type: 'int'},
        {name: 'username',    type: 'string'},
        {name: 'lastpost',    type: 'int'},
        {name: 'excerpt',     type: 'string'},
        {name: 'userid',      type: 'int'},
        {name: 'dateline',    type: 'int'},
        {name: 'forumtitle',  type: 'string'},
        {name: 'forumid',     type: 'int'},
        {name: 'replycount',  type: 'int'},
        {name: 'lastposter',  type: 'string'}        
    ]
});

var store = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'data.jsp',
        reader: {
            type: 'json',
            root: 'topics',
            totalProperty: 'totalCount',
            idProperty: 'threadid'
        }
    }
});

I am not sure how this works in other versions of ExtJS if you are actually using 3.x, you will have to check your own ExtJS documentation. Also as suggested, you should be seeing an error message in your browser’s error console. That will tell you exactly what the problem is.