通过EXTjs搭建一个HR后台首页欢迎页
<title>自定义拖拽</title>
<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<script type="text/javascript" src="ext-3.1.1/examples/ux/Portal.js"></script>
<script type="text/javascript" src="ext-3.1.1/examples/ux/PortalColumn.js"></script>
<script type="text/javascript" src="ext-3.1.1/examples/ux/Portlet.js"></script>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script type="text/javascript">
//创建一个树目录
Ext.onReady(function(){
var root=new Ext.tree.AsyncTreeNode({id:"root",text:"根目录"});
var tree=new Ext.tree.TreePanel({
width:200,
root:root,
loader:new Ext.tree.TreeLoader({dataUrl:"TreeMenuList.aspx"})
// renderTo:"tree"
});
//创建3个grid\
//创建recode
var recode= new Ext.data.Record.create([{name:"UserName"},{name:"Age"},{name:"Address"}]);
//创建reader
var reader = new Ext.data.JsonReader({totalProperty:"count",root:"data"},recode);
//创建store
var store=new Ext.data.Store({
http://www.cnblogs.com/zhbsh/admin/%22UserInfoList.aspx",
reader:reader
})
//创建grid
store.load();
//创建grid列 显示用户信息
var cm=new Ext.grid.ColumnModel([{header:"用户名",name:"UserName",sortable:true},{header:"年纪",name:"UserName",sortable:true},{header:"地址",name:"Address",sortable:true}]);
var griduser= new Ext.grid.GridPanel({
cm:cm,
store:store,
height:200
});
//创建一个表单提交
var regform=new Ext.form.FormPanel({
height:200,
defaultType:"textfield",//创建默认为textField
labelAlign:"right",//右对齐
// renderTo:"tree",
http://www.cnblogs.com/zhbsh/admin/%22regform.aspx",
items:[
//
{fieldLabel:"姓名",allowBlank:false,emptyText:"输入姓名",name:"userName"},
{xtype:"radio",name:"sex",boxLabel:"男"},
{xtype:"radio",name:"sex",boxLabel:"女"},
{fieldLabel:"年龄",name:"age",emptyText:"请输入年龄",allowBlank:false},
{fieldLabel:"家庭住址",name:"Address",emptyText:"请输入家庭住址",allowBlank:false}
//
],
buttons:[{text:"保存数据",handler:function(){
regform.getForm().submit({
success:function(form,action){
Ext.Msg.alert("添加员工信息",action.result.msg);
},
failure:function(){
Ext.Msg.alert("添加员工信息","消息输入错误");
}
})
}}]//button结束
})
//创建一个viewport
new Ext.Viewport({
title:"员工系统",
layout:"border",
//将页面分成2部分左右。左边为树结构。右边为拖拽
items:[{
title:"系统目录",
region:"west",
layout:"accordion",
width:200,
items:[
{title:"员工管理",items:[tree]}
,
{title:"职位管理",html:"职位管理"}
]
},
//右边拖拽空间
{
region:"center",
xtype:"portal",
items:[
{columnWidth:.33,items:[{title:"最新用户",items:[griduser]}]}//定义每个框
,
{columnWidth:.33,items:[{title:"用户注册",items:[regform]}]},
{columnWidth:.33,items:[{title:"最新资讯",height:236,html:"最新的新闻资讯"}]}
]
}
]
//结束
})
//结束
})
</script>
</head>
<body>
</body>
</html>
其中用的几个aspx文件源码：
regform.aspx
<%@ Page Language="C#" %>
<% string name = Request.Params["UserName"].ToString();
int age = int.Parse(Request.Params["Age"].ToString());
string add = Request.Params["Address"].ToString();
if (name != "" && age != 0 && add != "")
{
Response.Write("{success:true,msg:'添加成功'}");
}
else
{
Response.Write("{failed:true,msg:'添加失败'}");
}
%>
TreeMenuList.aspx
<%@ Page Language="C#" %>
[{id:"depts",text:"部门管理",leaf:true},{id:"users",text:"员工管理",leaf:true},{id:"money",text:"财务管理",leaf:true},{id:"emp",text:"职位管理",leaf:true}]
UserInfoList.aspx
<%@ Page Language="C#" %>
{data:[{UserName:"张三",Age:"20",Address:"上海第一工业大学"},{UserName:"李四",Age:"22",Address:"上海大学"},{UserName:"王五三",Age:"25",Address:"交通大学"}],count:"10"}
因没绑定库只返回json。只要绑定放回json即可
浙公网安备 33010602011771号