0

我尝试使用 jsp 对 EXTJS Grid 进行编码。我修改了EXTJS的例子，从jsp页面获取数据，但是数据没有加载。

能否请你帮忙 ？

网格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，数据.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);
%>
4

1 回答 1

0

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

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

更新

我对您的商店数据模型实施感到困惑。我从未见过它作为 new 的第二个参数实现JsonReader。

但是因为您使用的是baseParam配置，所以我假设您使用的是 ExtJS 3.x 而不是 4.x，而且我承认我对 3.x 不是很熟悉，所以这可能是一个合法的数据模型实现。

在 ExtJS 4.x 中，数据模型通常被实现为与 store 不同的对象，如下所示：

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 文档。同样按照建议，您应该在浏览器的错误控制台中看到一条错误消息。这将告诉您确切的问题是什么。

于 2012-05-05T15:29:12.960 回答