GridPanel中的动态Tips

atgfss

浏览: 71523 次
性别:
来自: 南京

最近访客更多访客>>

yhq1212

yhcc_0817

ling_iori

sdfwds4

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT Firebug Struts JavaScript JSP

首先看一下效果图:

思路

Tips的展现,必须要有一个Target,也就是说,Tips要想显示出来,必须要有个目标对象才行

GridPanel中的每一行其实都是一个X行一列的Table(可以通过firebug查看元素获得真实的HTML代码),这样我们就可以以这个Table为目标,来做他的Tips

但是问题在于,这个Table是Javascript生成的,我们无法获知它的ID,怎么办呢?

我们就手动的给他一个ID,但是问题又来了,如何给他一个不重复的ID呢?

幸好,EXTJS为我们提供了Ext.id()这个函数,这个函数的目的就是在你的项目中生成一个唯一的ID,这就好办了.

JS核心代码

先写一个方法,用于显示这个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>

 &nbsp;

 </td>

 <td>

 担任职务

 </td>

 <td>

 ${empInfo.postName }

 </td>

 </tr>

 </table>

 </div>

 </body>

</html>

//仅此而已,如果出现问题,请理清一下这个思路然后在看看代码,我觉得这个不是太难的,只是有些东西需要我们去尝试而已