`
liyanhui
  • 浏览: 350448 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类：
  • ext
EXTJSPprototype.netHTML 
阅读更多
  在项目上遇到一个问题：在显示列表上增加鼠标手势提示用户可以点击进去显示。
  方法：
<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
			}]
	});

});
分享到：
| 转载eclipse3.2的svn插件的安装（links文 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext.grid.GridPanel属性祥解

    ### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...

    可编辑表格Ext.grid.EditorGridPanel

    Ext.grid.EditorGridPanel是Ext JS库中的一个组件，主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能，是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...

    org.restlet.ext.servlet-2.1.1.jar

    org.restlet.ext.servlet-2.1.1.jar

    ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

    这篇文章的标题指出这是一个关于“Ext.grid.plugin.RowEditing”的重构，版本为v1.4，发布日期为2011年9月11日。重构通常意味着代码的改进，可能涉及性能优化、错误修复或功能增强。在4.0版本中，RowEditing插件的...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    当我们需要在数据发生变化时执行某些操作（如发送数据到服务器），可以通过监听 `store` 的 `update` 事件来实现： ```javascript store.on("update", function(store, record, operation) { // 这里可以编写...

    Ext grid panel 滚动条位置不变

    ### Ext grid panel 滚动条位置不变 在前端开发领域，特别是在使用Ext JS框架时，保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下，这一功能可以确保用户在数据刷新后仍然停留在之前...

    org.restlet.ext.servlet

    看名字，有需要下jar包

    Ext表格列锁定+多表头插件

    这个插件主要用于改进Ext Grid的用户体验，特别是处理大量数据时，通过列锁定和多表头功能，使得用户能够更有效地浏览和操作数据。 首先，"列锁定"是Ext Grid中一个非常实用的功能，特别是在显示宽广、多列的数据表...

    Ext.ux.touch.grid-master.rar

    在使用Ext.ux.touch.grid-master时，你需要将相关的JavaScript文件引入到你的EXTJS Touch项目中，并根据文档指导配置和实例化组件。通过与EXTJS Touch的其他组件配合，如模型（Model）、存储（Store）和视图（View）...

    Ext.grid.ColumnModel显示不正常

    Ext.grid.ColumnModel显示不正常

    linux php开启openssl拓展报错时候替换本机的openssl文件夹

    出现以下报错，替换/usr/...add_assoc_name_entry’:/data/src/php-5.6.23/ext/openssl/openssl.c:664: warning: ‘ASN1_STRING_data’ is deprecated (declared at /usr/local/include/openssl/asn1.h:553)/data/src/...

    封装Ext.grid.Grid+dwr实现增删该查

    `Ext.grid.Grid`是Ext JS库中的一个组件，用于创建可交互的数据网格，而DWR（Direct Web Remoting）则是一种允许JavaScript和Java在浏览器端进行安全、高效通信的技术。本篇文章将深入探讨如何利用这两者结合，实现...

    org.restlet.ext.slf4j.jar

    org.restlet.ext.slf4j.jar

    extjs4.1-ux.rar

    2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid.plugin.DragSelector 8、Ext....

    Ext.grid.GridPanel 删除线

    Ext.grid.GridPanel 删除线 放到example文件夹下运行

    Ext.get与Ext.fly的区别

    - **性能优势**：当需要对同一个DOM元素进行多次操作时，`Ext.get`比`Ext.fly`更高效，因为它只需要查找一次DOM元素。 **缺点**： - **内存占用**：由于`Ext.get`会将DOM元素封装成`Ext.Element`对象并缓存起来，...

    Ext.data.Store的基本用法

    在这个例子中，当`store`加载数据时，会自动将`sort`和`dir`参数发送到服务器端。 #### 六、从store中获取数据 从`Ext.data.Store`中获取数据可以通过多种方式实现。最常见的方法是使用`getAt`方法结合`get`方法来...

    Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

    在Ext JS库中，`Ext.grid.plugin.RowExpander`是一个扩展插件，用于在网格行中添加可展开的详情区域。在Ext4.2版本中，用户可能遇到一个特定的问题，即`RowExpander`的`collapsebody`和`expandbody`事件无法正常触发...

    Ext grid 简单实例

    4. **创建Grid Panel**: 创建一个Ext.grid.Panel实例，将Store、Model和Column Model绑定到Grid Panel上。还可以配置其他选项，如分页、排序和过滤。 5. **加载数据**: 在页面加载时，Store会自动发送请求到Web服务...

Magicbox
Global site tag (gtag.js) - Google Analytics