关于gridPanel无法显示Store内容的请教

alfredgao 2008-08-28
小弟近日在做一个ext的grid分页,遇到了种种莫名奇妙的错误。现在是可以捕获到start和load参数,在后台也能捕获相应数据,不知为何无法将数据显示在表格上。请各位大虾指正错误。

Js:
Ext.onReady(function(){
   

    var fm = Ext.form;
var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});
    var cm = new Ext.grid.ColumnModel([
sm,{
header:'ID',
dataIndex:'id',
width:40,
align:'center'
},{
header: "别名",
dataIndex: 'alias',
editor: new fm.TextField({
allowBlank: false
}),
width:90,
align:'center'
        },{
header: "引擎类型",
dataIndex: 'engineType',
editor: new fm.TextField({
allowBlank: false
}),
align:'center'
        },{
header: "服务器名称",
dataIndex: 'serverName',
editor: new fm.TextField({
allowBlank: false
}),
align:'center'
        },{
header: "数据库名称",
dataIndex: 'dbName',
editor: new fm.TextField({
allowBlank: false
}),
align:'center'
        },{
header: "数据库用户",
dataIndex: 'dbUser',
editor: new fm.TextField({
allowBlank: false
}),
align:'center'
        },{
header: "数据库密码",
dataIndex: 'dbPwd',
editor: new fm.TextField({
allowBlank: false
}),
align:'center'
        },{
header: "数据库描述",
dataIndex: 'descInfo',
editor: new fm.TextField({
allowBlank: false
}),
align:'center'
        },{
header: "数据库类型",
dataIndex: 'dbType',
editor: new fm.TextField({
allowBlank: false
}),
align:'center'
        },{
header: "AccessTimes",
dataIndex: 'accessTimes',
editor: new fm.TextField({
allowBlank: false
}),
align:'center'
        }
    ]);

    cm.defaultSortable = true;

    var Database = Ext.data.Record.create([
           {name: 'id', type: 'int'},
           {name: 'alias', type: 'string'},
           {name: 'engineType', type: 'string'},
           {name: 'serverName', type: 'string'},
           {name: 'dbName', type: 'string'},
           {name: 'dbUser', type: 'string'},
           {name: 'dbPwd', type: 'string'},
           {name: 'descInfo', type: 'string'},
           {name: 'dbType', type: 'int'},
   {name: 'accessTimes',type:'int'}
      ]);

var store = new Ext.data.JsonStore({
url:'./database_manage.jsp',
baseParams:{command:'query'},
reader: new Ext.data.JsonReader({   
                    root: 'dbs',   
                    totalProperty: 'count',   
                    id: 'id'   
                    }),
fields:Database,
pruneModifiedRecords:true, //True to clear all modified record information each time the store is loaded or when a record is removed. (defaults to false).
sortInfo: {field: "id", direction: "ASC"} //设置默认排序规则, EditorGridPanel在新增加一行却未保存时如果点击header排序会出现'行142字符6983,modified为空或不是对象'
});

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,//Shorthand for colModel
        renderTo : 'database_grid',
        resizeable:true,
width:660,
        height:390,
        title:'数据库管理',
        frame:true,
        clicksToEdit:1,
sm:sm,//Shorthand for selModel.
iconCls:'icon-grid',
loadMask: true,
stripeRows:true,
tbar:[
{// 添加按钮
text:'添加',
iconCls:'database_add',
handler:function(){
var m = new Database({
alias:'db',
engineType:'0',
serverName:'127.0.0.1',
dbName:'名称',
dbUser:'Sys',
dbPwd:'sys',
descInfo:'描述信息',
dbType:'0',
accessTimes:"0"
});
grid.stopEditing();
store.insert(0, m);
grid.startEditing(0, 2);
store.getAt(0).dirty=true; // 设置该行记录为脏数据(默认为非脏数据),否则在保存时将无法判断该行是否已修改
}
},'-',{
id:'newWindowButton',
text:'新面板中添加',
iconCls:'database_add',
handler:function(){
    showDbAddWindow(); //显示表单所在窗体
}
},'-',{//删除按钮
id:'btnDelete',
text:'删除',
iconCls:'database_delete',
handler:function(){
var sm = grid.getSelectionModel();
var selected = sm.getSelections();
var ids = [];
for(var i=0;i<selected.length;i+=1){
var db = selected[i].data;
if(db.id) {
ids.push(db.id); //如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除
}else{
//如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行
store.remove(store.getAt(i));
}
}
if(ids.join('')=='') return;

Ext.Msg.confirm('信息','确定要删除所选项吗?',function(btn){
if(btn=='yes'){
//发送删除请求
Ext.lib.Ajax.request(
'POST',
'./database_manage.jsp',{
success:function(request){
var message = request.responseText;
Ext.Msg.alert('信息',message);
store.reload();
},failure:function(){
Ext.Msg.alert('错误','删除时出现未知错误.');
}
},
'command=delete&ids='+ids
);
}
});
}
},'-',{//保存按钮
text:'保存',
iconCls:'save',
handler:function(){
var json = [];
for(i=0,cnt=store.getCount();i<cnt;i+=1){
var record = store.getAt(i);
if(record.dirty) // 得到所有修改过的数据
json.push(record.data);
}
if(json.length==0){
Ext.Msg.alert('信息','没有对数据进行任何更改');
return;
}

//发送保存请求
Ext.lib.Ajax.request(
'POST',
'./database_manage.jsp',{
success:function(request){
var message = request.responseText;
Ext.Msg.alert('信息',message);
store.reload();
//grid.getView().refresh();
},
failure:function(){
Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
}
},
'command=save&dbs='+encodeURIComponent(Ext.encode(json))
);
}
},'-'],
    bbar: new Ext.PagingToolbar({
        pageSize: 20,
        store: store,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
        emptyMsg: "没有记录"
    })
    });
    store.load({params:{start:0,limit:10}});

后台处理(manage.jsp):
<%@ page language="java" import="java.util.*" pageEncoding="UTF8" contentType="text/html; charset=UTF8"%>
<%@ page import="org.json.*"%>
<%@page import="com.supermap.ddoperation.util.StrUtil"%>
<%@page import="com.supermap.ddoperation.vo.DataBaseMeta"%>
<%@page import="com.supermap.ddoperation.web.DataBaseAction"%>
<%
String command = request.getParameter("command");
if("query".equals(command)){
int start = StrUtil.parseInt(request.getParameter("start"));
int limit = StrUtil.parseInt(request.getParameter("limit"));
JSONObject json = new DataBaseAction().pagedQuery(start/10+1,limit);
out.print(json);
//response.setContentType("text/html;charset=UTF-8");
System.out.println(json);
}

在Console上打印出的Json格式为:
{"dbs":
[
{"descInfo":"","dbPwd":"","engineType":1,"accessTimes":0,"dbName":"","serverName":"","dbType":1,"dbUser":"","id":1,"alias":"db"},
{"descInfo":"????","dbPwd":"sys","engineType":0,"accessTimes":0,"dbName":"??","serverName":"127.0.0.1","dbType":0,"dbUser":"Sys","id":2,"alias":"db"},
{"descInfo":"??????","dbPwd":"sys","engineType":1,"accessTimes":10,"dbName":"??","serverName":"192.168.100.100","dbType":1,"dbUser":"Sys","id":3,"alias":"GIS"},
{"descInfo":"????","dbPwd":"sys","engineType":0,"accessTimes":0,"dbName":"??","serverName":"127.0.0.1","dbType":0,"dbUser":"Sys","id":4,"alias":"db"},
{"descInfo":"????","dbPwd":"sys","engineType":0,"accessTimes":0,"dbName":"??","serverName":"127.0.0.1","dbType":0,"dbUser":"Sys","id":5,"alias":"db"},
{"descInfo":"????","dbPwd":"sys","engineType":0,"accessTimes":0,"dbName":"??","serverName":"127.0.0.1","dbType":0,"dbUser":"Sys","id":6,"alias":"db"}
],
"count":6}
alfredgao 2008-08-28
小弟现在的困惑是无法将后台取到的

Json数据显示在Grid里
jianfeng008cn 2008-08-28
一般是因为json字符串中有不符合js规范的字符 如换行 引号问题 等等
如果是用freemarker模板生成的数据 建议用?js_string 一般都能解决(有些需要结合?html)
alfredgao 2008-08-28
我的处理是用JsonObject处理的啊,数据格式为{"dbs":
[
{"descInfo":"","dbPwd":"","engineType":1,"accessTimes":0,"dbName":"","serverName":"","dbType":1,"dbUser":"","id":1,"alias":"db"},
{"descInfo":"????","dbPwd":"sys","engineType":0,"accessTimes":0,"dbName":"??","serverName":"127.0.0.1","dbType":0,"dbUser":"Sys","id":2,"alias":"db"},
{"descInfo":"??????","dbPwd":"sys","engineType":1,"accessTimes":10,"dbName":"??","serverName":"192.168.100.100","dbType":1,"dbUser":"Sys","id":3,"alias":"GIS"},
{"descInfo":"????","dbPwd":"sys","engineType":0,"accessTimes":0,"dbName":"??","serverName":"127.0.0.1","dbType":0,"dbUser":"Sys","id":4,"alias":"db"},
{"descInfo":"????","dbPwd":"sys","engineType":0,"accessTimes":0,"dbName":"??","serverName":"127.0.0.1","dbType":0,"dbUser":"Sys","id":5,"alias":"db"},
{"descInfo":"????","dbPwd":"sys","engineType":0,"accessTimes":0,"dbName":"??","serverName":"127.0.0.1","dbType":0,"dbUser":"Sys","id":6,"alias":"db"}
],
"count":6}

应该没问题吧
yuanke 2008-08-28

在打出之前用
response.setCharacterEncoding("utf-8");
应该是中文乱码问题
daha33 2008-08-28
var store = new Ext.data.JsonStore({
url:'./database_manage.jsp',
baseParams:{command:'query'},
reader: new Ext.data.JsonReader({
root: 'dbs',
totalProperty: 'count',
id: 'id'
}),

id: 'id'?你打出来的json对象中没有 id
Global site tag (gtag.js) - Google Analytics