0

jspを使ってEXTJS Gridをコーディングしてみました。jsp ページからデータを取得するように EXTJS の例を変更しましたが、データが読み込まれません。

助けていただけますか？

グリッド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);
%>
4

1 に答える 1

0

json 列のタイトルが ExtJS モデルと一致していないようです。

モデルは、データを配置する場所を認識できるように、データと同じ列名を持つ必要があります。

アップデート

あなたのストア データ モデルの実装には困惑しています。new の 2 番目の引数として実装されているのを見たことがありませんJsonReader。

しかし、baseParamconfig を使用しているため、4.x ではなく ExtJS 3.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 ドキュメントを確認する必要があります。また、示唆されているように、ブラウザのエラー コンソールにエラー メッセージが表示されるはずです。それは問題が何であるかを正確に教えてくれます。

于 2012-05-05T15:29:12.960 に答える