ExtJS的Grid无法服务器端的数据

wNvShine 2009-03-19 08:54:34



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Show Data</title>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext/ext-all.js"></script>



<script type="text/javascript">

		Ext.onReady(function(){

			 // create the Data Store

			 

		    var store = new Ext.data.JsonStore({

		    	proxy: new Ext.data.ScriptTagProxy({

			            url: 'MessageServlet'

			        }),

		        root: "messages",

		        totalProperty: "total",

		        fields: [	         

		            {name: 'message_id', mapping:"'message_id'", type: 'int'},

		            {name: 'head',mapping:"'head'"},

		            {name: 'body',mapping:"'body'"},

		            {name: 'revs_time',mapping:"'revs_time'"},

		            {name: 'flag',mapping:"'flag'"},

		        ]

		    });







		    var pagingBar = new Ext.PagingToolbar({

		        pageSize: 25,

		        store: store,

		        displayInfo: true,

		        displayMsg: 'Displaying topics {0} - {1} of {2}',

		        emptyMsg: "No topics to display",

		        

		        items:[

		            '-', {

		            pressed: true,

		            enableToggle:true,

		            text: 'Show Preview',

		            cls: 'x-btn-text-icon details',

		            toggleHandler: function(btn, pressed){

		              //  var view = grid.getView();

		              //  view.showPreview = pressed;

		              //  view.refresh();

		            }

		        }]

		    });



		    var grid = new Ext.grid.GridPanel({

		        el:'grid_Cbb',

		        width:700,

		        height:500,

		        title:'My MessageList',

		        store: store,

		        trackMouseOver:false,

		        disableSelection:true,

		        loadMask: true,



		        // grid columns

		        columns:[{

						header:"id",

						dataIndex:'message_id',

						width:160,

						sortable: true

			        },{

		            header: "head",

		            dataIndex: 'head',

		            width: 150,

		            sortable: true

		        },{

		        	header: "body",

		        	dataIndex:'body',

		            width: 200,

		            sortable: true

		        },{

		            header: "time",

		            dataIndex: 'revs_time',

		            width: 150,

		            align: 'right',

		            sortable: true

		        },{	           

		            header: "flag",

		            dataIndex: 'flag',

		            width: 100,   

		            sortable: true

		        }],

		        // paging bar on the bottom

		        bbar: pagingBar

		    });

			

			//var gridHead=grid.getView().getHeaderPanel(true);

		    // render it

		    grid.render();



		    // trigger the data store load

		    store.load({params:{start:0, limit:15}});



		   

		});

		

		

	

	</script>

</head>

<body>

<div id="grid_Cbb" style="height:265px" align="center" >

</div>

</body>

</html>

这是我js代码。。服务器端是一个Servlet



package com.ui.servlet;



import java.io.IOException;

import java.io.PrintWriter;

import java.util.List;



import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;





import com.test.entity.MessageBean;

import com.test.entity.UserBean;

import com.ui.biz.MessageBiz;

import com.ui.biz.MessageBizImpl;

import com.ui.biz.UserBiz;

import com.ui.biz.UserBizImpl;



/**

 * Servlet implementation class LoginServlet

 */

public class MessageServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

     

    /**

     * @see HttpServlet#HttpServlet()

     */

    public MessageServlet() {

        super();

        // TODO Auto-generated constructor stub

    }



	/**

	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		doPost(request,response);

	}



	/**

	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");	

		 UserBiz userBiz=new  UserBizImpl();

		MessageBiz messageBiz=new MessageBizImpl();

		List messageList=messageBiz.getMessage();

		String json="{totalProperty:"+messageList.size()+",root:[\n";

		for(int i=0;i<messageList.size();i++){

			MessageBean message=(MessageBean)messageList.get(i);

			json+="{message_id:'"+message.getMessage_id()+"',head:'"+message.getHead()+"',body:'"+message.getBody()+"',revs_time:'"+message.getRevs_time()+"',flag:'"+message.isFlag()+"'}";

			if(i<messageList.size()-1){

				json+=",\n";

			}

		}

	

		json+="\n]}";

		System.out.println(json);

		response.getWriter().println(json);

	}



}

不知道怎么回事。。就是不能显示数据。。拜托达人帮我看下哪里错了好吗。。小弟新手。。感激不尽

...全文

297 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

Shen_JC 2009-04-09

打赏
举报

跟你一样的问题，json都传到浏览器端了，可还是读不出来！

Ghost_520 2009-03-19

打赏
举报

[Quote=引用 14 楼 wNvShine 的回复:]
楼上的。。我照着你的去做的。。还是不行。。
[/Quote]

哪里不行，贴出 json 代码。

wNvShine 2009-03-19

打赏
举报

楼上的。。我照着你的去做的。。还是不行。。

Ghost_520 2009-03-19

打赏
举报

我的 JSON 包有如下：

commons-beanutils.jar
commons-collections-3.2.1.jar
commons-lang-2.4.jar
commons-logging-1.1.1.jar
ezmorph-1.0.5.jar
json-lib-2.2.2-jdk15.jar



var store=new Ext.data.JsonStore({

            //    autoLoad : true,

                 url: "<%=path%>/contacterManage.do?action=findAllContacter",

                  fields: [  'groupName','groupId','id','text','contacterNumber','contacterBirthday','contacterAddress','contacterCompanyName'

                                  ,'contacterCompanyAddress','contacterFax','contacterEmail','contacterZipCode','contacterRemarks']

            });

            

            /*

                加载数据,

                参数： flag:all 表示查询所有的数据

            */ 

            store.load({params:{flag:'all'}});     

         

             var sm = new Ext.grid.CheckboxSelectionModel(); 

             

            var colM = new Ext.grid.ColumnModel([

                new Ext.grid.RowNumberer(), //自动行号

                sm,   

                {header:"所在组",sortable: true,dataIndex:"groupName"},

                 {header:"姓名",sortable: true,dataIndex:"text"},                                    

                 {header:"手机号码",sortable: true,dataIndex:"contacterNumber"},

                 {header:"生日",sortable: true,dataIndex:"contacterBirthday"},

                 {header:"地址",sortable: true,dataIndex:"contacterAddress"},

                 {header:"公司名称",sortable: true,dataIndex:"contacterCompanyName"},

                 {header:"公司地址",sortable: true,dataIndex:"contacterCompanyAddress"},

                 {header:"传真",sortable: true,dataIndex:"contacterFax"},

                 {header:"邮箱",sortable: true,dataIndex:"contacterEmail"},

                 {header:"邮编",sortable: true,dataIndex:"contacterZipCode"},

                 {header:"备注",sortable: true,dataIndex:"contacterRemarks"}

            ]);

         

             var gridConacterInfo = new Ext.grid.GridPanel({

                  cm : colM,

                  sm : sm,

                  store : store,

                height: 468,

                width : 820,

                  collapsible: true,

                  autoScroll:true,

                  loadMask:true,                  

                  animCollapse: false,

                  iconCls: 'icon-grid',

                  listeners : {

                    rowdblclick  : function( grid , rowIndex , e){

                        // 获得行数据

                           var record = grid.getStore().getAt(rowIndex);                           

                        

                        dbClickviewConacterInfo(record ,"查看联系人信息");

                    }

                }                         

             });



public ActionForward findAllContacter(ActionMapping mapping, ActionForm form,

            HttpServletRequest request, HttpServletResponse response) throws IOException {

        // TODO Auto-generated method stub

        

        try{

            String flag = request.getParameter("flag");



            

            if(flag.toString().trim().equals("all")){

                // 查询所有的数据

                ContacterService service = new ContacterService();

                ArrayList allContacterList = service.findAllContacter();

                

                // 将数据使用 JSON 格式化后发回 Ext 客户端

                JSONObject json = new JSONObject();

                JSONArray dataArray=JSONArray.fromObject(allContacterList);

                System.out.println(dataArray);

                response.getWriter().println(dataArray); 

                         }

                  catch(Exception e){

                         printStackTrace();

　　　　　　　　　　}

        return null;

}

mumu_java 2009-03-19

打赏
举报



...

System.out.println(json);

response.setContentType("text/xml;charset=UTF-8");

response.getWriter().println(json);

...

lz再你的servlet中加上上边红色的部分,能解决你的乱码问题,但注意你的页面也要是UTF-8格式.如果后台json串没有问题了,别的应该很容易解决.

wNvShine 2009-03-19

打赏
举报

有没有成功的例子发出来看看。。谢谢了啊
很急

Ghost_520 2009-03-19

打赏
举报

看我给你另外一个帖子的回复以及相应的对以 JSON 操作的事例。

yushuiyouyue 2009-03-19

打赏
举报

对AJAX有兴趣的朋友，欢迎加入群78514534

wNvShine 2009-03-19

打赏
举报

还是不行。。现在连控件都出不来了。。

Ghost_520 2009-03-19

打赏
举报

1. 乱码问题解决下。

2. 按照我上面说的 mapping 的时候不要里面的单引号试试。 {name: 'message_id', mapping:"message_id", type: 'int'},

3. 好像 JSON 返回数据的时候属性值有引号。

json+="{'message_id':'"+message.getMessage_id()+"','head':'"+message.getHead()+"','body':'"+message.getBody()

+"','revs_time':'"+message.getRevs_time()+"','flag':"+message.isFlag()+"}"; 值为 Boolean的时候就不要引号。

这样试试。

wNvShine 2009-03-19

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Show Data</title>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext/ext-all.js"></script>



<script type="text/javascript">

Ext.onReady(function(){

    // create the Data Store

    

   var store = new Ext.data.JsonStore({

       proxy: new Ext.data.ScriptTagProxy({

               url: 'MessageServlet'

           }),

       root: "root",

       totalProperty: "totalProperty",

       fields: [             

          'message_id','head,body','revs_time','flag'

       ]

   });







   var pagingBar = new Ext.PagingToolbar({

       pageSize: 25,

       //store: store,

       displayInfo: true,

       displayMsg: 'Displaying topics {0} - {1} of {2}',

       emptyMsg: "No topics to display",

       

       items:[

           '-', {

           pressed: true,

           enableToggle:true,

           text: 'Show Preview',

           cls: 'x-btn-text-icon details',

           toggleHandler: function(btn, pressed){

             //  var view = grid.getView();

             //  view.showPreview = pressed;

             //  view.refresh();

           }

       }]

   });



   var grid = new Ext.grid.GridPanel({

       el:'grid_Cbb',

       width:700,

       height:500,

       title:'My MessageList',

       store: store,

       trackMouseOver:false,

       disableSelection:true,

       loadMask: true,



       // grid columns

       columns:[{

               header:"id",

               dataIndex:'message_id',

               width:160,

               sortable: true

           },{

           header: "head",

           dataIndex: 'head',

           width: 150,

           sortable: true

       },{

           header: "body",

           dataIndex:'body',

           width: 200,

           sortable: true

       },{

           header: "time",

           dataIndex: 'revs_time',

           width: 150,

           align: 'right',

           sortable: true

       },{               

           header: "flag",

           dataIndex: 'flag',

           width: 100,   

           sortable: true

       }],

       // paging bar on the bottom

       bbar: pagingBar

   });

   

   //var gridHead=grid.getView().getHeaderPanel(true);

   // render it

   grid.render();



   // trigger the data store load

   store.load({params:{start:0, limit:15}});



  

});





		

	

	</script>

</head>

<body>

<div id="grid_Cbb" style="height:265px" align="center" >

</div>

</body>

</html>

真的不知道是哪里不对了。。就是出不来

wNvShine 2009-03-19

打赏
举报

{totalProperty:5,root:[
{message_id:'1',head:'?·??????',body:'??????????',revs_time:'2009-03-17',flag:'false'},
{message_id:'2',head:'?é??????',body:'°????ò?°??',revs_time:'2009-03-16',flag:'false'},
{message_id:'3',head:'????????',body:'NBA±¨??°?',revs_time:'2009-03-15',flag:'false'},
{message_id:'4',head:'????????',body:'????±?±¨??°?',revs_time:'2008-11-25',flag:'false'},
{message_id:'5',head:'?ú??????',body:'xxxxx±¨??°?',revs_time:'2002-10-15',flag:'false'}
]}

打印出来的JSON格式是这样的..

wwwlike 2009-03-19

打赏
举报

帮顶

zpriguh 2009-03-19

打赏
举报

json+="{message_id:'"+message.getMessage_id()+"',head:'"+message.getHead()+"',body:'"+message.getBody()+"',revs_time:'"+message.getRevs_time()+"',flag:'"+message.isFlag()+"'}";
if(i<messageList.size()-1){
json+=",\n";
};
紅色部分加上引號

zpriguh 2009-03-19

打赏
举报

Ghost_520 2009-03-19

打赏
举报

1. 把 JSON 返回值打印出来，贴上来给我们看看。

2. fields: [
{name: 'message_id', mapping:"'message_id'", type: 'int'},
{name: 'head',mapping:"'head'"},
{name: 'body',mapping:"'body'"},
{name: 'revs_time',mapping:"'revs_time'"},
{name: 'flag',mapping:"'flag'"},
]

mapping 的时候不要里面的单引号试试。 {name: 'message_id', mapping:"message_id", type: 'int'},