EXTJS grid + JSP數據未加載

Question

我試着用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，你的JSON列標題的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

沒有人可以與你的ExtJS的模式相匹配。

該模型需要與數據具有相同的列名，以便它知道將數據放在哪裏。

UPDATE

我被你的存儲數據模型實現混淆。我從來沒有見過它作爲新的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' 
     } 
    } 
}); 

我不知道，如果你是其實這是如何工作的ExtJS的其他版本使用3.x，你必須檢查你自己的ExtJS文檔。同樣如所暗示的，您應該在瀏覽器的錯誤控制檯中看到錯誤消息。這將告訴你到底是什麼問題。