首先看一下效果图:
[img]/upload/attachment/91321/df7dbaf6-e713-30f9-81dd-38ca2b92377c.jpg[/img]
[size=large][color=red]思路[/color][/size]
Tips的展现,必须要有一个Target,也就是说,Tips要想显示出来,必须要有个目标对象才行
GridPanel中的每一行其实都是一个X行一列的Table(可以通过firebug查看元素获得真实的HTML代码),这样我们就可以以这个Table为目标,来做他的Tips
但是问题在于,这个Table是Javascript生成的,我们无法获知它的ID,怎么办呢?
我们就手动的给他一个ID,但是问题又来了,如何给他一个不重复的ID呢?
幸好,EXTJS为我们提供了Ext.id()这个函数,这个函数的目的就是在你的项目中生成一个唯一的ID,这就好办了.
[color=red][size=large]JS核心代码[/size][/color]
先写一个方法,用于显示这个Tips
function showPanelTips(gridPanel) { var view = gridPanel.getView(); for (var rowIndex = 0; rowIndex < gridPanel.getStore().getCount(); rowIndex++) { var record = gridPanel.getStore().getAt(rowIndex);//此处根据下标获得某行的数据 var rows = view.getRow(rowIndex);//根据那个下标获得这个row var dom = rows.getElementsByTagName('tr')[0];//此处通过firebug获知里面其实是一个tr标签 var id = Ext.id();//通过此函数生成一个随即的ID dom.id = id;//将此ID赋值给我们获得的那一个dom var eid = record.get('eid');//在Record中找到后台传过来的ID(用于和后台交互) var tip = new Ext.ToolTip({ target : id, layout : 'form', autoLoad : { url : 'basicEmployees.do?method=findInfoByEid&eid=' + eid,//和Struts里的Action交互,在Action中重定向到另外一个页面.在那个页面里通过EL表达式就可以显示我们想要的数据 method : 'GET' }, height : 250, width : 350, dismissDelay : 15000, trackMouse : true }); } };当表格读取数据的时候执行他 gridStore.on('load', function(a, b, c) { showPanelTips(gridPanel); });
//=============附上显示数据的那个JSP页面===================
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style>* { margin: 0px; padding: 0px; font-size: 12px;}</style> </head> <body> <div style="height: 200px; width: 350px; max-height: 400px;"> <table width="317" height="202" border="0"> <tr> <td width="126" rowspan="7"> <img src="../empPhoto/${empInfo.photo }" height="150" /> </td> <td width="73"> 姓名 </td> <td width="72"> ${empInfo.name } </td> </tr> <tr> <td> 编号 </td> <td> ${empInfo.empNum } </td> </tr> <tr> <td> 生日 </td> <td> ${empInfo.birthday } </td> </tr> <tr> <td> 性别 </td> <td> ${empInfo.sex } </td> </tr> <tr> <td> 电话 </td> <td> ${empInfo.telePhone } </td> </tr> <tr> <td> 手机 </td> <td> ${empInfo.mobil } </td> </tr> <tr> <td> 所属部门 </td> <td> ${empInfo.dptName } </td> </tr> <tr> <td> </td> <td> 担任职务 </td> <td> ${empInfo.postName } </td> </tr> </table> </div> </body></html>
//仅此而已,如果出现问题,请理清一下这个思路然后在看看代码,我觉得这个不是太难的,只是有些东西需要我们去尝试而已
