ExtJs与Servlet的交互

最新推荐文章于 2016-09-06 15:19:45 发布

wjnj2010

最新推荐文章于 2016-09-06 15:19:45 发布

阅读量649

点赞数

分类专栏： ExtJs

本文链接：https://blog.csdn.net/wjnj2010/article/details/9456439

版权

ExtJs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.编写MyServlet,post中的方法如下

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		String _str = "[{name:'jack',age:'23',sex:'male'}," +
				"{name:'rose',age:'32',sex:'famale'},{name:'smith',age:'36',sex:'male'},{name:'jack',age:'23',sex:'male'}," +
				"{name:'rose',age:'32',sex:'famale'},{name:'smith',age:'36',sex:'male'}]";
		response.getWriter().print(_str);

	}

web.xml中servlet的配置略去，实用firefox访问MyServlet的结果如下:"http://localhost:8080/Servlet2GridPanel/servlet/MyServlet"

[{name:'jack',age:'23',sex:'male'},
{name:'rose',age:'32',sex:'famale'},
{name:'smith',age:'36',sex:'male'},
{name:'jack',age:'23',sex:'male'},
{name:'rose',age:'32',sex:'famale'},
{name:'smith',age:'36',sex:'male'}]

2.编写GridPanel所在的页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="java.util.*" pageEncoding="UTF-8"%>
<html>
	<head>
		<title>My JSP 'HelloWorld.jsp' starting page</title>
		<link rel="stylesheet" type="text/css"
			href="./script/ext/resources/css/ext-all.css"></link>
		<script type="text/javascript"
			src="./script/ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="./script/ext/ext-all.js"></script>
		<script type="text/javascript">
       Ext.onReady(function(){
      
       
       var cm = new Ext.grid.ColumnModel([
       			//new Ext.grid.CheckboxSelectionModel(),
       			new Ext.grid.RowNumberer(),
       			{header:'姓名',tooltip:'提示序号',dataIndex:'name',sortable:true},
       			{header:'年龄',dataIndex:'age'},
       			{header:'性别',dataIndex:'sex'}
       		]);
       		
       //json数据加载
       var store = new Ext.data.JsonStore({
       	url:'http://localhost:8080/Servlet2GridPanel/servlet/MyServlet',
       	fields:['name','age','sex']
       });
           
       var grid = new Ext.grid.GridPanel({
       			title:'用户列表',
       			width:300,
       			frame:true,
       			renderTo:Ext.getBody(),
       			autoHeight:true,
       			groupByText:'依本列分组',
       			stripeRows:true,//隔行显示不同底色  
       			 stripeRows:true,//斑马线效果   
       			store:store,
       			cm:cm,
       		
       			
       			tools:[{id:'refresh'},{id:'help'},{id:'exit'}],
       			bbar:new Ext.PagingToolbar({
       				pageSize:2,
       				store:store,
       				 //displayInfo : true,//是否显示数据信息 
       				displayMsg:'显示第{0}到第{1}条记录，共计{2}条记录'
       			})
       		});
       		store.load();
       });
    </script>
	</head>

	<body style="margin: 30px">
		This is my JSP page.
		<br>
		<div id="form"></div>
		<div id="panel"></div>
	</body>
</html>

最终效果如下："http://localhost:8080/Servlet2GridPanel/window.jsp"

wjnj2010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs与Servlet的交互

1.编写MyServlet,post中的方法如下 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.s
复制链接

扫一扫

专栏目录