Extjs3.x Struts2 -Json-plugin学习范例 -Dept管理页面 06-JavaSript-爱易网页

Extjs3.x Struts2 -Json-plugin学习范例 -Dept管理页面 06

日期：2014-05-16　浏览次数：20420 次

Extjs3.x Struts2 -Json-plugin学习实例 -Dept管理页面 06

dept_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>
	
	<link rel="stylesheet" type="text/css" href="extjs/examples.css" />
	
	<script type="text/javascript" src="extjs/examples.js"></script>
	<script type="text/javascript" src="dept.js"></script>
	
	<script type="text/javascript">



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

dept.js文件

	
	var _reader = new Ext.data.JsonReader({
						totalProperty:"totalProperty",
						root:'depts'
					},[
				       {name:"id",type:"int",mapping:"id"},
				       {name:"name",type:"string",mapping:"name"},
				       {name:"description",type:"string",mapping:"description"}
				    ]);
					
	
	var _store = new Ext.data.Store({
		baseParams:{//起始参数，一般是表示分页的参数
			start:0,
			limit:20
		},
		sortInfo:{//数据排序的方式
			field:"id",
			direction:"asc"
		},
		//autoLoad:true,//是否自动加载数据
		remoteSort:true,
		reader:_reader,
		proxy:new Ext.data.HttpProxy({
			url:"dept.action",
			method:"POST"
		})		
	});	
	
	var _sm = new Ext.grid.CheckboxSelectionModel();//创建带复选框的选择模型
	
	//列模型 
	var _cm = new Ext.grid.ColumnModel([
	                new Ext.grid.RowNumberer(),//在第一列显示固定不动的行
	                _sm,
	               {header:"编号", width:40,dataIndex:"id"},
	               {header:"部门名称", width:150,dataIndex:"name"},
	               {header:"描述", dataIndex:"description",id:"description"}
	          ]);

	var addOrModifyFn = function(_url, _id){
		new Ext.Window({
			id:"addOrModifyWin",
			//iconCls:xxx,
			title:'添加部门',
			width:400,
			height:135,
			resizable:false,//不可以调整大小			
			modal:true,//设置此Window为模式窗口,
			animateTarget:'addDept',//当指定一个id或元素,window打开时会与元素之间产生动画效果
			closeAction:'close',
			listeners:{
				'show':function(){
					btn_add.disable();//当窗口显示时，则添加按钮不可用
				},
				'close':function(){
					btn_add.enable();//当宣传品关闭时，则添加按钮可用
				}
			},
			items:[{
				xtype:"form",
				labelWidth:75,
				id:"deptForm",
				//url:"dept.action",
				frame:true,
				//title:"添加部门",
				bodyStyle:"padding:5px 5px 0",
				border:false,
				waitMsgTarget:true,//true的意思是说表单提交时的等待信息在这个表单之内显示，而不是弹出框(进度条形式的)
				labelAlign:"right",
				labelPad : 10,// 标签与字段录入框之间的空白
				//reader:_reader,
				//anchor: '100%',
				defaults:{width:230},
				defaultType:"textfield",
				items:[{
					xtype:"hidden",
					name:"dept.id",
					value:0
				},{
					fieldLabel:"部门名称",
					name:"dept.name",
					allowBlank:false,
					emptyText:"输入部门名称……"
				},{
					fieldLabel:"描  述",
					name:"dept.description",
					allowBlank:false
				}]				
			}],
			buttonAlign:'center',
			minButtonWidth:60,
			buttons:[{
				text:"提交",
				tooltip:"提交数据",
				handler:function(){
						if(Ext.getCmp("deptForm").getForm().isVali

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Extjs3.x Struts2 -Json-plugin学习范例 -Dept管理页面 06

相关资料更多>

推荐阅读更多>