ext操作及页面排版布局

最新推荐文章于 2019-02-24 16:00:28 发布
最新推荐文章于 2019-02-24 16:00:28 发布
阅读量2.2k 收藏
点赞数
分类专栏： Ajax/Jquery/js/ext/dwr 文章标签： ext stylesheet function javascript button string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaerfeng/article/details/6967751
版权 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	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>
		<script type="text/javascript">
			function changetheme(){
				var theme=document.getElementById("theme").value;
				window.location.href="main.jsp?theme="+theme;
			}
		</script>
		<link rel="StyleSheet" href="css/dtree.css" type="text/css" />
		<link rel="StyleSheet" href="css/index.css" type="text/css" />
		<link rel="stylesheet" type="text/css"
			href="ext/resources/css/ext-all.css">
		<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="ext/ext-all.js"></script>
		<script type="text/javascript" src="js/dtree.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<%
		int t = Integer.parseInt(request.getParameter("theme")==null?"0":request.getParameter("theme"));
			if (t==1) {
		 %>
		 <link rel="StyleSheet" href="ext/resources/css/xtheme-gray.css" type="text/css" />
		 <%
			}else if (t==3) {
		 %>
		  <link rel="StyleSheet" href="ext/resources/css/xtheme-access.css" type="text/css" />
		 <%
			}else{
		 %>
		  <link rel="StyleSheet" href="ext/resources/css/xtheme-blue.css" type="text/css" />
		  <%
			};
		 %>
		<%
			String sid = (String) request.getParameter("id");
			if (sid == null) {
		%>
		<script type="text/javascript" src="js/index.js"></script>
		<%
			} else {
				int id = Integer.parseInt(sid);
				switch (id) {
					case 10 :
		%>
		<script type="text/javascript" src="js/student/showStudent.js"></script>
		<%
			break;
					case 11 :
		%>
		<script type="text/javascript" src="js/student/showStudent.js"></script>
		<%
			break;
					case 12 :
		%>
		<script type="text/javascript" src="js/student/addStudent.js"></script>
		<%
			break;
					case 13 :
		%>
		<script type="text/javascript" src="js/student/addStudent.js"></script>
		<%
			break;
					case 14 :
		%>
		<script type="text/javascript" src="js/student/showStudent.js"></script>
		<%
			break;
				};
			};
		%>
	</head>

	<body οnlοad="getTime();">
		<div id="north-div">
			<img alt="" src="images/top/logo_head.jpg" />
			<span id="exit"> 
				<select id="theme" οnchange="changetheme();">
					<option value="0">默认主题</option>
					<option value="1">复古灰</option>
					<option value="2">清新蓝色</option>
					<option value="3">深遂黑</option>
				</select>
				<img alt="" src="images/top/top_logout.gif">
			</span>
			<div>
				<span id="hello"></span>
				<span id="admin"> <font color="red">很拽の土豆</font>，欢迎登录学员管理系统 </span>
				<span id="say"> <marquee scrolldelay="200">
						<span id="words"></span>
					</marquee> </span>
			</div>
		</div>
		<div id="east-div"></div>
		<div id="west-div" style="font-size: 12px;">
			<script type="text/javascript">
	var d = new dTree('d');
	d.add(0, -1, '部门管理员您好');
	d.add(1, 0, '课程管理');
	d.add(2, 1, '查看课程', 'main.jsp?id=1', '', '');
	d.add(3, 1, '修改课程', 'main.jsp?id=2', '', '');
	d.add(4, 1, '添加课程', 'main.jsp?id=3', '', '');
	d.add(5, 0, '班级管理');
	d.add(6, 5, '查看班级', 'main.jsp?id=4', '', '');
	d.add(7, 5, '修改班级', 'main.jsp?id=5', '', '');
	d.add(8, 5, '添加班级', 'main.jsp?id=6', '', '');
	d.add(9, 0, '教师信息管理');
	d.add(10, 9, '查看教师', 'main.jsp?id=7', '', '');
	d.add(11, 9, '修改教师信息', 'main.jsp?id=8', '', '');
	d.add(12, 9, '添加教师', 'main.jsp?id=9', '', '');
	d.add(29, 0, '学员信息管理');
	d.add(30, 29, '查看学员', 'main.jsp?id=10', '', '');
	d.add(31, 29, '修改学员信息', 'main.jsp?id=11', '', '');
	d.add(32, 29, '添加学员', 'main.jsp?id=12', '', '');
	d.add(13, 0, '成绩管理');
	d.add(14, 13, '查看成绩', 'CoreManage.jsp?id=13', '', '');
	d.add(15, 13, '修改成绩', 'CoreManage.jsp?id=14', '', '');
	d.add(16, 13, '添加成绩', 'CoreManage.jsp?id=15', '', '');
	d.add(17, 0, '文件管理');
	d.add(18, 17, '文件上传', 'CoreManage.jsp?id=16', '', '');
	d.add(19, 18, '教学资料', 'CoreManage.jsp?id=17', '', '');
	d.add(20, 18, '日常管理', 'CoreManage.jsp?id=18', '', '');
	d.add(21, 17, '文件修改', 'CoreManage.jsp?id=19', '', '');
	d.add(22, 21, '教学资料', 'CoreManage.jsp?id=20', '', '');
	d.add(23, 21, '日常管理', 'CoreManage.jsp?id=21', '', '');
	d.add(24, 0, '最新消息');
	d.add(25, 24, '通知', 'CoreManage.jsp?id=22', '', '');
	d.add(26, 24, '奖惩情况', 'CoreManage.jsp?id=23', '', '');
	d.add(27, 26, '奖励情况', 'CoreManage.jsp?id=24', '', '');
	d.add(28, 26, '惩罚情况', 'CoreManage.jsp?id=25', '', '');
	document.write(d);
</script>
		</div>
		<div id="center-div">
		</div>
		<div id="south-div">
			<a href="#">土豆网</a>
			<a href="#">土豆网</a>
			<a href="#">土豆网</a>
			<a href="#">土豆网</a>
			<br />
			<br />
			© Copyright 1989-2011 很拽の土豆
			<br />
			版权所有 翻版不究
		</div>
<select id="statuslist" style="visibility:hidden"> 
	<option>On</option> 
	<option>Off</option> 
</select>
<select id="userTypes" style="visibility:hidden"> 
	<option>读者</option> 
	<option>VIP读者</option>
	<option>管理员</option> 
	<option>超级管理员</option> 
</select>
	</body>
</html>


document.οncοntextmenu=new Function("event.returnValue=false;"); //禁止右键功能,单击右键将无任何反应 
document.onselectstart=new Function("event.returnValue=false;"); //禁止先择,也就是无法复制 
   function Logout()
   {
   		Ext.MessageBox.hide();
         Ext.MessageBox.show({
         title:"退出",
    msg:"确定要退出吗?",
    buttons:{"yes":"是","no":"否"},
    fn:function(e){if(e=="yes"){window.parent.location.href="logout.jsp";}},
    animEl:"caidan",
     // width:500,
    icon:Ext.MessageBox.INFO,
    closable:false,
     progress:false,
     wait:false,
     progressText:""
   // prompt:true
   // multiline:true
         });
   }
   

   Ext.onReady(function(){
 			
         //  var btn11 = new Ext.Button({
         //    text:'登陆',
         //   type:'button',
         //   id:'login',
         //   enableToggle:true,
         //   pressed: true,
         //   allowDepress:true,
         //   toggleHandler:chushiyemian
         //  });
       
   
         var item1 = new Ext.Panel({
                title: '学员功能',
                collapsed:true,
                autoScroll:true,
                iconCls:'stu-icon',
          		//html:['<a href="javascript:studentInfo()">个人信息</a><br>','<a href="javascript:history()">历史成绩</a><br>','<a href="javascript:startQuestion()">开始答题</a>'],
                cls:'empty',
                bodyStyle:'background-color:#dee7ff',
				items: [{
			        items: {
			        	bodyStyle:'background-color:#dee7ff',
			        	scale: 'large',
			        	id:'meInfo',
			            xtype: 'button',
			            text:'个人信息',
			            iconCls:'info',
			           // enableToggle:false,
			           // toggleHandler:studentInfo,
			            listeners:{   
                    	"click":function(){   
                        Ext.get('content-iframe_in_out').dom.src='StudentInfo.jsp';  //你要连接的地址
         				Ext.getCmp('container').setTitle('个人信息');
         				//this.disable();
                    		} 
                    	}
			        }
			    }, {
			        items: {
			            xtype: 'button',
			            scale: 'large',
			            id:'history',
			            text:'历史成绩',
			            iconCls:'history',
			            enableToggle:false,
			            toggleHandler:history,
			            listeners:{   
                    	"click":function(){   
                        Ext.get('content-iframe_in_out').dom.src='history.jsp';  //你要连接的地址
         				Ext.getCmp('container').setTitle('历史成绩');   
                    		} 
                    	}
			        }
			    }, {
			        items: {
			            xtype: 'button',
			            scale: 'large',
			            id:'startq',
			            text:'开始答题',
			            iconCls:'question',
			           // enableToggle:false,
			           // toggleHandler:startQuestion,
			            listeners:{   
                    	"click":function(){   
                        Ext.get('content-iframe_in_out').dom.src='StartQuestion.jsp';  //你要连接的地址
         				Ext.getCmp('container').setTitle('开始答题');
                    		} 
                    	}
			        }
			    }]
            });
            var item2 = new Ext.Panel({
                title: '教员功能',
                 collapsed:true,
                autoScroll:true,
                iconCls:'tech-icon',
          		//html:['<a href="javascript:teacherInfo()">个人信息</a><br>','<a href="javascript:subjectManager()">科目管理</a><br>','<a href="javascript:questionManager()">试题管理</a><br>','<a href="javascript:studentManager()">学生管理</a>'],
                cls:'empty',
                bodyStyle:'background-color:#dee7ff',
				items: [{
			        items: {
			        	bodyStyle:'background-color:#dee7ff',
			        	scale: 'large',
			        	id:'meInfo',
			            xtype: 'button',
			            text:'个人信息',
			            iconCls:'tinfo',
			           // enableToggle:false,
			           // toggleHandler:studentInfo,
			            listeners:{   
                    	"click":function(){   
                        Ext.get('content-iframe_in_out').dom.src='TeacherInfo.jsp';  //你要连接的地址
         				Ext.getCmp('container').setTitle('个人信息');
         				//this.disable();
                    		} 
                    	}
			        }
			    }, {
			        items: {
			            xtype: 'button',
			            scale: 'large',
			            id:'subject',
			            text:'科目管理',
			            iconCls:'subject',
			            enableToggle:false,
			            toggleHandler:history,
			            listeners:{   
                    	"click":function(){   
                        Ext.get('content-iframe_in_out').dom.src='SubjectManager.jsp';  //你要连接的地址
         				Ext.getCmp('container').setTitle('科目管理');   
                    		} 
                    	}
			        }
			    }, {
			        items: {
			            xtype: 'button',
			            scale: 'large',
			            id:'question',
			            text:'试题管理',
			            iconCls:'question',
			           // enableToggle:false,
			           // toggleHandler:startQuestion,
			            listeners:{   
                    	"click":function(){   
                        Ext.get('content-iframe_in_out').dom.src='QuestionManager.jsp';  //你要连接的地址
         				Ext.getCmp('container').setTitle('试题管理');
                    		} 
                    	}
			        }
			    }, {
			        items: {
			            xtype: 'button',
			            scale: 'large',
			            id:'student',
			            text:'学员管理',
			            iconCls:'student',
			          //  enableToggle:false,
			          //  toggleHandler:startQuestion,
			            listeners:{   
                    	"click":function(){   
                        Ext.get('content-iframe_in_out').dom.src='StudentManager.jsp';  //你要连接的地址
         				Ext.getCmp('container').setTitle('学员管理');
                    		} 
                    	}
			        }
			    }]
            });
        
   var viewport = new Ext.Viewport({
            layout:'border',
            items:[
               new Ext.Panel({
                region:'west',
                id:'west-panel',
                iconCls:'homeMenu',
                split:false, //可以左右调整宽度
                width: 146, //宽度
                 minSize: 120,
                 maxSize: 400,
                 margins:'0 0 0 5',
                title:'菜单',
                bodyStyle:'background-color:#dee7ff',
                titleCollapse:true, //通过item的标题来打开或关闭
                collapsible:true,
                layoutConfig:{
                    animate:true
                },
                layout:'accordion',
             items: [item1,item2]
           
            }),
            new Ext.Panel({
            title: '欢迎登陆',
            region:'center',
            collapsible:false,
            autoScroll:true,
            id: 'container',
            iconCls:'home',
            width:600,
            html:'<iframe id="content-iframe_in_out" frameborder="no" src="mid.jsp" style="width:100%;height:100%"></iframe>'
                        }) 
             ]
        });
   
       function chushiyemian()  //chushiyemian对应button的toggleHandler事件
       {
         Ext.get('content-iframe_in_out').dom.src='StartQuestion.jsp';  //你要连接的地址
         Ext.getCmp('container').setTitle('开始考试');
       }
       
       viewport.render('index');
    });

package com.tudou.ssh.service;

import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.tudou.ssh.commons.BaseDao;
import com.tudou.ssh.commons.PageModel;
import com.tudou.ssh.dao.UserDao;
import com.tudou.ssh.entity.User;

public class UserService extends BaseDao implements UserDao {

	@SuppressWarnings("unchecked")
	public String getUserJsons(int start, int pageSize) {
		StringBuffer json = new StringBuffer();
		PageModel pm = this.getDatasByHql("select u from User u", null, start,
				pageSize);
		List<User> users = pm.getDatas();
		int count = pm.getTotal();
		json.append("{total:" + count);
		json.append(",root:[");
		for (User u : users) {
			json.append("{userId:" + u.getUserId() + ",");
			json.append("userName:'" + u.getUserName() + "',");
			json.append("userPwd:'" + u.getUserPwd() + "',");
			json.append("contactName:'" + u.getContactName() + "',");
			json.append("phone:" + u.getPhone() + ",");
			json.append("officePhone:" + u.getOfficePhone() + ",");
			json.append("address:'" + u.getAddress() + "',");
			json.append("email:'" + u.getEmail() + "',");
			json.append("status:" + u.getStatus() + ",");
			json.append("createDate:'" + u.getCreateDate() + "',");
			json.append("ip:'" + u.getIp() + "',");
			json.append("lastLoginTime:'" + u.getLastLoginTime() + "',");
			json.append("membertype:'" + u.getMembertype().getMember_name()
					+ "'},");
		}
		json = new StringBuffer(json.substring(0, json.length() - 1));
		json.append("]}");
		return json.toString();
	}

	public boolean delUser(String userIds) {
		String[] userId = userIds.split(",");
		for (String s : userId) {
			this.delete(Integer.parseInt(s));
		}
		return true;
	}

	public boolean updateUser(String jsons) {
		JSONArray json = JSONArray.fromObject(jsons);
		User user = new User();
		for (Object obj : json) {
			JSONObject js = JSONObject.fromObject(obj);
			user.setUserId(js.getInt("userId"));
			user.setUserName(js.getString("userName"));
			user.setContactName(js.getString("contactName"));
			user.setPhone(js.getString("phone"));
			user.setOfficePhone(js.getString("officePhone"));
			user.setAddress(js.getString("address"));
			user.setEmail(js.getString("email"));
			user.setStatus(js.getInt("status"));
			user.setUserName(js.getString("userName"));
			user.setUserPwd(js.getString("userPwd"));
			user.setIp(js.getString("ip"));
			user.setLastLoginTime(js.getString("lastLoginTime"));
			user.setCreateDate(js.getString("createDate"));
			// user.setMembertype(membertype)(js.getString("membertype"));
		}
		return this.saveOrUpdate(user);
	}
}


yaerfeng
关注
专栏目录
Ext3在IE11和360浏览器中显示不兼容、排版混乱，但在火狐、谷歌和QQ中显示正常
Ttaonima的博客
01-16 1395
最近在解决Ext在浏览器中兼容性的问题，在网上找了好多方法，比如使用 use strict 还有就是添加特定的和删除掉这部分的内容等，但都不能解决下面图示所出现的问题，第一次发帖，还望各位知道的大神告诉下我，谢谢各位大神 房屋查询 document.onkeydown=function(e){ // 兼容FF和IE和Opera
总结了42 种前端常用布局方案（超全）前端必备
自救 唯有自强
06-04 2437
本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为如下几类：实现水平布局比较简单，方法也比较多，这里总结了7种常用的布局方法，其公共的CSS代码如下所示： 其 HTML 结构也是固定的，就是一个父级，其宽度继承了 的宽度，还有一个子级，这里是固定的300px*300px，代码如下： 最终的实现效果如下： 上图中玫瑰色的块是父级，随页面宽度增加的；淡紫色是子级，相对于父级居中的。若元素为行内块级元素，也就是 display: inline-block 的元素，可以通过为其父元素设置t ext
Ext中的页面排版布局总和
Crystal
12-13 172
//小小的入门 首先是怎么得到Ext中的对象：只需要一个new关键字即可（例如：new Ext.form.FormPanel({name:'form表单',items:[new Ext.form.TextField({field:'用户名'})})） 注释一下： {}：这个里面放的主要是new的这个对象里面的配置，即他们的属性 items：[]这个里面放入的主要是对象，即直接放入可以了，不...
Ext操作dom和Jquery操作dom详细介绍
吾日五省我身！
08-30 209
一：Ext操作Dom         可以通过Id获取Ext.Element对象       var aaa = Ext.get("input"); //input为id       var bbb =Ext.fly("input"); //只操作一次建议用这个       可以通过下面方式把Ext.Element对象转换成dom对象               var p...
Ext页面布局方式总结
独行者的专栏
01-08 1307
以下是本人对Ext几种常用布局方式做的总结：1.Accordion Layout:用来做可折叠式布局，可用于Panel、Viewport等控件。2.AnchorLayout:用来做精确定位布局，可用于Panel、Viewport等控件。3.BorderLayout:用来做边框式布局，可分为东、西、南、北、中五个方位进行布局，可用于Panel、Viewport等控件。4.CardLa
ExtJs常用布局--layout详解（含实例）
weixin_30377461的博客
05-23 997
序言： 笔者用的ExtJs版本：ext-3.2.0 ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 本文所有实例代码已提供下载，下载链接：ExtJs常用布局--layout详解实例代码 简介： 最常用的边框布局—...
运用pdflib库操作pdf排版例程
10-15
PDFLib的`PDF_begin_page_ext()`和`PDF_end_page_ext()`函数可以帮助我们在指定的页面上开始和结束绘图操作。最后，使用`PDF_save()`将所有改动保存到文件中，并用`PDF_close_pdi_document()`关闭PDF文档。 除了...
ext简明教程_掏钱学ext
07-31
- **布局管理器**：解释了如何使用不同的布局管理器（如卡片布局、网格布局）来组织页面元素。 2. **高级特性详解** - **数据绑定**：教授如何使用ext的数据绑定功能来实现动态数据展示。 - **事件处理**：深入...
掌握ExtJS面板与布局：经典教程与实例详解
它支持10种不同的布局样式，如标准布局、卡片布局（tabpanel）、网格布局（gridlayout）等，这使得开发者能够根据需求自由定制页面布局。面板组件通常包含五个基本部分：底部工具栏、顶部工具栏、面板头部、面板底部...
Ext页面布局
06-07
自己简单写了一个extjs框架，希望大家共同学习，共同进步！
Extjs 之主界面布局
06-09
Extjs 之主界面简单布局，适合刚刚接触ext的新手学习，就一个html页面。 现在拿来分享。
xtheme-blue
02-08
xtheme-blue Theme for ExtJS framework
Ext常用6大布局方式
java19901023的专栏
06-21 546
前言：  只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局    简单说明最常用到的6种布局方式：  一.最简单的布局：FitLayout  Javascript代码  new Ext.Viewport({    layout:'fit',    items:[oGrid]  //oGrid是一个表格
Ext 常用布局
VFrank
02-24 1189
Ext 常用布局 hbox 和 vbox 一个是水平布局，一个是垂直方向的布局 // vbox new Ext.Container({ width: 1000, cls: 'sf-wrap', layout: { type: 'vbox', align: 's...
ExtJS——页面布局汇总
u013127751的博客
03-23 1426
Ext.onReady(function(){ var box1 = new Ext.Component({ autoEl:{ tag:'div', style:'background:red;width:300px;height:30px', html:'box1' } });
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值