关于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 |