Ext.grid：当鼠标移到查询结果列表grid上时鼠标变成手型

于 2009-12-28 17:31:54 发布
阅读量359 收藏
点赞数
分类专栏： ext 文章标签： EXT JSP prototype .net HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_10724/article/details/81803432
版权
在项目上遇到一个问题：在显示列表上增加鼠标手势提示用户可以点击进去显示。
方法：
<style type="text/css" media="all">
.x-grid3-row-over {
cursor:hand;
}
就Ok了
base.jsp 
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<!-- 这里可以添加我们的公共样式文件引用 -->
<link rel="stylesheet" type="text/css" href="/extjs/ext2core/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/style/default/css/platform.css">
<!-- 这里可以添加我们的公共js文件-->
<script type="text/javascript" language="javascript" src="/extjs/ext2core/ext-base.js"></script>
<script type="text/javascript" language="javascript" src="/extjs/ext2core/ext-all.js"></script>
<script type="text/javascript" language="javascript" src="/extjs/ext2core/ext-lang-zh_CN.js"></script>
<script type="text/javascript" language="javascript" src="/extjs/extExtend/Ext.util.pinyin.js"></script>
<script type="text/javascript" language="javascript" src="/js/platform.js"></script>
<script type="text/javascript" language="javascript">
Platform.CurrentUser.name = "<%=session.getAttribute("emp_name")%>";
Platform.CurrentUser.oaName = "<%=session.getAttribute("oa_name")%>";
Platform.CurrentUser.number = "<%=session.getAttribute("emp_number")%>";
Platform.CurrentUser.source = "<%=session.getAttribute("source")%>";

var REQUIRED_STR = "<font color=red>*</font>";
</script>

searchposition.jsp 
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ page import="java.util.*,com.pccw.eHR.pub.RecordSetBean"%>
<%@ page import="org.apache.commons.io.IOUtils,java.io.*,java.net.*,java.net.URLEncoder" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>职位查询</title>
<jsp:include page="/cache/base.jsp"></jsp:include>
<script language=javascript src="/components/widget/_DepartTreePanel.js"></script>
<script language=javascript src="/components/widget/_DepartTreePeeker.js"></script>
<script type="text/javascript" language="javascript" src="searchposition.js"></script>
[color=darkred]<style type="text/css" media="all">
.x-grid3-row-over {
   cursor:hand;
}
</style>[/color]
</head>
<%

	String v_emp_number = (String)session.getAttribute("emp_number");
    String v_person_id = (String)session.getAttribute("person_id");
	String v_menu_url = "/ehrcust/jso/position/searchposition/searchposition.jsp";
	String v_resp_id = "";

	try {	
		RecordSetBean rsb = new RecordSetBean();
		rsb.setParam(v_emp_number);
		rsb.setParam(v_menu_url);
		rsb.setRecodset("CMCC_EHR_API.find_first_resp_id");
		if (rsb.getCounts() > 0) {
			v_resp_id = rsb.getFieldAt(0);
		}

		rsb.clearParams();
		rsb = null;

		rsb = new RecordSetBean();
		rsb.setRecodset("CMCC_EHRCUST_HEADAUDIT_POS.get_positionkind_list");
%>
<script>
var positionClass = new Array(<%=rsb.getCounts()%>);
</script>
<% 
	for(int i=0; i < rsb.getCounts(); i++){
%>
<script>
	positionClass[<%=i%>] = new Array(2);

	positionClass[<%=i%>][0] = "<%=(String) rsb.getFieldAt(0)%>";
	positionClass[<%=i%>][1] = "<%=(String) rsb.getFieldAt(1)%>";
</script>
<%
	rsb.getHasNextRecord();
	}
	rsb.clearParams();
	} catch (Exception e) {
		System.out.println(e);
	}
%>
<script>
</script>
<body>
<iframe id="downloadFrame" style="display:none;"></iframe>
</body>
<script>
	var url =  '/ehrbase/jobstruct.do?method=listOrganTreeInfo&emp_number='+'<%=v_emp_number%>'+'&resp_id='+'<%=v_resp_id%>';
</script>
	<div id='searchposition' style="height:100%;"/>
	<span id="p1" style="visibility:hidden;display:none;"></span> 
</html>
，
searchposition.js 
Ext.onReady(function(){
	var currentH = document.body.clientHeight;
	var currentW = document.body.clientWidth;

	//定义顶栏所需控件与变量
	//组织Id
	var v_orgid = '-1';
	//职位类别
	var v_positionClass  = '-1';
	//职位状态
	var v_positionStatus  = '';
	//职位名称
	var v_positionName = '';
	//查询职位下人员信息的URL
	var v_url = '';
	//职位Id
	var v_position_id = '';
	//职位名称
	var v_postition_name = '';
	//是否包含子组织
	var v_subOrgFlag = 'N';

	Ext.QuickTips.init();//开启表单提示
	Ext.form.Field.prototype.msgTarget = 'side';//设置提示信息位置为边上


	var cm = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer({header : '',width : 30}),
			{header:'部门',dataIndex:'orgName',sortable:false,width:230},
			{header:'职位名称',dataIndex:'positionName',sortable:false,width:240},
			{header:'职位分类',dataIndex:'positionClassName',sortable:false,width:230},
			//{header:'职位说明书',dataIndex:'positionClassNumber',sortable:false,width:180},
			//{header:'职位状态',dataIndex:'positionStatus',sortable:false,width:70},
			{header:'人数',dataIndex:'sumEmp',sortable:false,width:70}
	]);



	//职位分类
/*
	var positionClassComboBox = new Ext.form.ComboBox({
			fieldLabel:'职位分类',
			hiddenName:'positionClassId',
			allowBlank:true,
			store	  :new Ext.data.SimpleStore({
							fields:['kindNumber','positionKind'],
							data  :positionClass
						}),
			valueField:'positionClassId',
			displayField:'positionClassName',
			typeAhead:true,
			editable:false,
			name:'positionClassId',
			mode:'local',
			triggerAction:'all',
			selectOnFocus:true,
			listWidth:120,
			vlaue:'',
			clearCls:'stop-float',//阻止浮动
			width:120

	});
		*/
	//职位分类信息数据
    var positionKindStore = new Ext.data.SimpleStore({
				fields:['kindNumber','positionKind'],
				data:positionClass
			});
	var positionClassComboBox  = new Ext.form.ComboBox({
					width:130, 
					maxHeight:200,
					hideLabel:'true',
					id:'positionClassName',
					name:'positionClassName',
					listWidth:200,
					store:positionKindStore,
					displayField:'positionKind',
					valueField:'positionKind',
					mode: 'local',
					triggerAction: 'all',
					selectOnFocus:true,
					editable: true,
					allowBlank: true,
					readOnly:true,
					listeners: {
							'select' : function(combo,record,index ) {
							v_positionClass = positionKindStore.getAt(index).get("kindNumber");
						}
					}
				});

	var dsReader = new Ext.data.XmlReader(
	{
		record : 'PositionClassInfo',
		totalRecords : 'results'
	},[
		{name:'positionNumber',mapping:'positionNumber'},
		{name:'positionName',mapping:'positionName'},
		{name:'orgName',mapping:'orgName'},
		{name:'positionClassName',mapping:'positionClassName'},
		{name:'positionClassNumber',mapping:'positionClassNumber'},//postionBook 
		{name:'positionStatus',mapping:'positionStatus'},
		{name:'sumEmp',mapping:'sumEmp'},
		{name:'positionId',mapping:'positionId'}
	]
	);

	var ds = new Ext.data.Store({
		autoLoad : false,
		url : '/cust/jso/positionAction.do',
		reader:dsReader
	});



	//定义部门选择框
	var departList = new Components.widget.DepartTreePeeker({
		dataUrl : url,
		width:180,
		showOrgId : false,
		listeners : {
				"select" : function(record, recIndex){
					v_orgid = record.get('id');
				}
		}
	});


	//数据加载前设置参数
	ds.on('beforeload',function(){
		//是否包含子组织 Y:包含； N:不包含
		if(check.getValue()){
			v_subOrgFlag = 'Y';
		}else{
			v_subOrgFlag = 'N';
		}		

		if(v_subOrgFlag=='Y' && v_orgid=='-1'){
			Ext.Msg.alert("提示","'部门'不能为空!");
			return false;
		}
		//取得职位名称值
		v_positionName = Ext.getCmp('positionName').getValue();
		ds.baseParams = {
			method:'getPostionInfo',
			orgId : v_orgid,
			positionClass : v_positionClass,
			positionName  : v_positionName,
			subOrgFlag  : v_subOrgFlag		
		};
	});

	//设置分页栏
	var appPageTool = new Ext.PagingToolbar( {   
			pageSize : 10,   
			store : ds,   
			displayInfo : true,   
			displayMsg : '第 {0} - {1} 条,共计 {2} 条',   
			emptyMsg : '没有数据!'  
	});
	//是否包含子组织
	var check = new Ext.form.Checkbox({
		id:'check',
		name:'check',
		listeners:{
				'check':function(){
					check.getValue()
					if(check.getValue() && v_orgid=='-1' ){
						Ext.Msg.alert("提示","'部门'不能为空");
					}
				}
		}
	});	

	//定义grid
	var grid = new Ext.grid.GridPanel({
		title : '职位查询: ',
		height:currentH,
		width:currentW,
		loadMask: { msg:'正在加载数据,请稍候...' },
		store:ds,
		cm:cm,
		frame:true,
		autoWidth:false,
		autoHeight:false,
		autoScroll:true,
		bodyStyle:'width:100%',
		el:'searchposition',
		bbar:appPageTool,
		tbar:[
		' 职位名称: ',
		new Ext.form.TextField({
			id:'positionName',
			name:'positionName',
			width:100
		}),'-',
		'部门: ',
		departList,'-',
		check,
		{text:'包括下级部门'}
		,'-',
		' 职位分类: ',positionClassComboBox,'-',
		{
			xtype:'button',
			text :'查询',
			cls : 'x-btn-text-icon blist',
			icon : '../../../../style/default/images/pro_top_011.gif',
			handler:function(){
								appPageTool.unbind(grid.getStore());
								appPageTool.bind(ds);
								grid.reconfigure(ds,cm);
								grid.getStore().load({
									params:{start:0,limit:10}
								});
			}
		},{
			xtype : 'button',
			text : '重置',
			cls: 'x-btn-text-icon blist',
			icon:'../../../../style/default/images/reset.png',
			handler:function() { 
				departList.setValue('');
				check.setValue('');
				Ext.getCmp('positionName').setValue('');
				positionClassComboBox.clearValue();
				v_orgid='-1';
				v_positionClass='-1';
				v_subOrgFlag='N';
				v_positionName='';

 			}
		}
		]
	});

	openPostionBook =  function(personId){
		var index = personStore.find('personId',personId);
		var rec = personStore.getAt(index);
		var fileName = rec.get('bookName');
		var filepath = rec.get('positionBookUrl');
		Ext.get('downloadFrame').dom.src = encodeURI('downTemplate.jsp?filePath='+filepath+'&fileName='+fileName);
	};

	var personCM  = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer({header : '',width : 20}),
			{header:'部门名称',dataIndex:'orgName',sortable:false,width:200},
			{header:'人员编号',dataIndex:'empNumber',sortable:false,width:80},
			{header:'人员名称',dataIndex:'empName',sortable:false,width:80},
			{header:'职等',dataIndex:'grade',sortable:false,width:60},
			{header:'用工形式',dataIndex:'employeerType',sortable:false,width:80},
			{header:'拓展职级',dataIndex:'tzGrade',sortable:false,width:60},
			{header:'拓展档次',dataIndex:'tzLevel',sortable:false,width:80},
			//{header: "查看说明书",dataIndex:'bookName',sortable:false,width:160},
			 {header: "查看说明书", 
				width: 160, 
				dataIndex: "personId",
				renderer : function(v,metadata,rec) {
					var v_bookName = rec.get('bookName');
					//如果如果没有职位说明书 就不显示‘下载’
					if(v_bookName==null || v_bookName==''){
						 return '';
					}else{
						return '<a href="#" onclick=openPostionBook('+v+')>'+v_bookName+'</a>';
					}
				}


			}		 
	]);	


	//人员信息Reader
	var personDsReader = new Ext.data.XmlReader(
	{
		record : 'PersonJsoByPostionIdInfo',
		totalRecords : 'results'
	},[
		{name:'personId',mapping:'personId'},
		{name:'empNumber',mapping:'empNumber'},
		{name:'empName',mapping:'empName'},
		{name:'orgName',mapping:'orgName'},
		{name:'positionClassName',mapping:'positionClassName'},
		{name:'positionName',mapping:'positionName'},//postionBook
		{name:'bookName',mapping:'bookName'},
		{name:'positionBookUrl',mapping:'positionBookUrl'},
		{name:'grade',mapping:'grade'},
		{name:'tzGrade',mapping:'tzGrade'},
		{name:'tzLevel',mapping:'tzLevel'},
		{name:'employeerType',mapping:'employeerType'}
	]
	);

			/*,{header: "操作",  width: 50,  dataIndex: "positionId", renderer : function(v,metadata,rec) {
					return '<a href="javascript:void(0)" onclick="searchBook('+v+')">修改</a>'
				}
			}	*/
var personStore= new Ext.data.Store({
		autoLoad : false,
		url : '/cust/jso/positionAction.do',
		reader:personDsReader
	});	
    personStore.on('beforeload',function(){
		//alert('v_position_id: '+v_position_id+",v_postition_name:" + v_postition_name);
		personStore.baseParams = {	
			method:'getPersonInfoByPositionId',
			positionId:v_position_id,
			positionName:v_postition_name
		}
	 }
	);

var personGrid = new Ext.grid.GridPanel({
				title : '',
				height:400,
				width:800,
				//loadMask: { msg:'正在加载数据,请稍候...' },
				store:personStore,
				cm:personCM,
				frame:true,
				autoWidth:false,
				autoHeight:false,
				bodyStyle:'width:90%'
		});


		var win = new Ext.Window({
			title:'人员信息',
		    layout:'fit',
		    width:800,
		    height:400,
		    modal : true,
			resizable : false,
		    closable:true,
		    items:personGrid,
		    buttons : [
		    {
		    	text:'关闭',
		    	handler:function(){
		    		win.hide();
		    	}
		    }
		    ]
		});
	//添加行行函数
	grid.on('rowclick',function(Grid,rowIndex,e){
		var ds2 = Grid.getStore();
		var row = ds2.getById(ds2.data.items[rowIndex].id);
		v_position_id = row.get("positionId");
		v_postition_name = row.get("positionName");
		win.show();
		win.setTitle(v_postition_name+' 信息列表');
	    personStore.load({
		  params:{positionId:v_position_id,positionName:v_postition_name}
		});
	});


	//面板
	new Ext.Viewport({
		layout:'border',
		items:[{
				region:'center',
				items:grid,
				border:false
			}]
	});

});

iteye_10724
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值