Extjs3.x Struts2 -Json-plugin学习范例 -Dept管理页面 06
日期：2014-05-16 浏览次数：20506 次
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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
