EXTJS сетка + данные JSP не загружены

Question

Я попытался выполнить команду EXTJS Grid с помощью jsp. Я изменяю пример EXTJS для получения данных с страницы jsp, но данные не загружаются.

Не могли бы вы помочь?

управляющей сеткой в ​​радиолампе расслоения плотной

<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.

Модель должна иметь те же имена столбцов, что и данные, чтобы она знала, куда помещать данные.

UPDATE

Я путает вашей реализации магазин модели данных. Я никогда не видел, чтобы это реализовано как второй аргумент для нового JsonReader.

Но поскольку вы используете baseParam config, я предполагаю, что вы используете 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. Также, как было предложено, вы должны увидеть сообщение об ошибке в консоли ошибок вашего браузера. Это точно скажет вам, в чем проблема.