Question

我尝试使用jsp编写EXTJS Grid代码。我修改EXTJS示例以从jsp页面获取数据，但是未加载数据。

你能帮忙吗？

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

您的所有json列标题似乎都与您的ExtJS模型不匹配。

模型需要具有与数据相同的列名，以便它知道将数据放在何处。

<强>更新

我对您的商店数据模型实施感到困惑。我从未将其视为新JsonReader的第二个参数。

但是因为您正在使用baseParam配置，我假设您使用的是ExtJS 3.x而不是4.x而且我对3.x不太熟悉，因此可能是一个合法的数据模型实现。< / p>

在ExtJS 4.x中，数据模型通常作为一个单独的对象实现，而不是商店，如下所示：

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'
        }
    }
});

如果您实际使用的是3.x，我不确定其他版本的ExtJS是如何工作的，您必须检查自己的ExtJS文档。同样如建议的那样，您应该在浏览器的错误控制台中看到错误消息。这将告诉你究竟是什么问题。

未加载EXTJS网格+ JSP数据

1 个答案: