日期:2014-05-16  浏览次数:20410 次

Extjs3.x Struts2 -Json-plugin学习实例 -User管理页面 - 完 07

user_list.jsp

?

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>用户管理</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
	
	<script type="text/javascript" src="extjs/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="extjs/radiogroup.js"></script>
	
	<link rel="stylesheet" type="text/css" href="extjs/examples.css" />
	
	<script type="text/javascript" src="extjs/examples.js"></script>
	<script type="text/javascript" src="user.js"></script>
	
	<script type="text/javascript">



	</script>
	
  </head>
  
  <body>
    <div id="dept"></div>
    <div id="topic-win" class="x-hidden">
  </body>
</html>

?

?

?

user.js

?

var _reader = new Ext.data.JsonReader({
				root:"users"
			},[
			   {name:"id",type:"int",mapping:"id"},
			   {name:"name",type:"string",mapping:"name"},
			   {name:"username",type:"string",mapping:"username"},
			   {name:"password",type:"string",mapping:"password"},
			   {name:"sex",type:"boolean",mapping:"sex"},
			   {name:"phone",type:"string",mapping:"phone"},
			   {name:"tel",type:"string",mapping:"tel"},
			   {name:"url",type:"string",mapping:"url"},
			   {name:"email",type:"string",mapping:"email"},
			   {name:"deptId",type:"int",mapping:"dept.id"},
			   {name:"deptName",type:"string",mapping:"dept.name"},
			   {name:"address",type:"string",mapping:"address"},
			   {name:"description",type:"string",mapping:"description"}
			 ]);

var user_store = new Ext.data.Store({
				baseParams:{
					start:0,
					limit:20
				},
				sortInfo:{
					field:"id",
					dirction:"asc"
				},
				//autoLoad:true,
				remoteSort:true,
				proxy:new Ext.data.HttpProxy({
						url:"user.action",
						method:"POST"
				}),
				reader:_reader
	});

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

var user_cm = new Ext.grid.ColumnModel([
               new Ext.grid.RowNumberer(),
               _sm,
               {header:"ID",width:40,dataIndex:"id",sortable:true,algin:"center"},
               {header:"用户名",width:60,dataIndex:"username",sortable:true},
               {header:"姓名",width:60,dataIndex:"name",sortable:true},
               {header:"性别",width:40,dataIndex:"sex",sortable:true,align:"center",
            	   renderer:function(_value){
            	   		if(_value){
            	   			return '男';
            	   		} else {
            	   			return '女';
            	   		}
               		}
               },
               {header:"部门",width:70,dataIndex:"deptName",sortable:true},
               {header:"联系电话",width:90,dataIndex:"phone",sortable:true},
               {header:"移动电话",width:90,dataIndex:"tel",sortable:true},               
               {header:"电子邮件",width:110,dataIndex:"email",sortable:true,
            	   renderer:function(_value){
            	   		return '<a href="mailto:' + _value + '" ext:qtip="' +