未加载 EXTJS 网格 + JSP 数据

EXTJS grid + JSP data is not loaded

本文关键字：JSP 数据 网格 加载 EXTJS      更新时间：2023-09-26

我尝试使用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);
%>

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

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

更新

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

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

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

相关文章：