读书人

实现当鼠标放在grid的单元格下出现弹出

发布时间: 2012-11-23 22:54:33 作者: rapoo

实现当鼠标放在grid的单元格上出现弹出窗口以及右键功能
首先声明,这个不是本人原创,是在公司一牛人基础上改进的.在不修改Ext-all.js的前提下实现的

/**
* @class Ext.grid.GridView
* @override Ext.grid.GridView
* GridPanel单元格不能选中复制问题
* 单元格数据显示不完整 ,增加title 浮动提示信息
*/
Ext.override(Ext.grid.GridView, {
initTemplates : function() {
var ts = this.templates || {};
if (!ts.master) {
ts.master = new Ext.Template(
'<div hidefocus="true">',
'<div style="{ostyle}">{header}</div></div><div style="{bstyle}">{body}</div><a href="#" tabIndex="-1"></a></div>',
'</div>',
'<div cellspacing="0" cellpadding="0" style="{tstyle}">',
'<thead><tr style="{style}"><div {tooltip} {attr} unselectable="on" style="{istyle}">',
this.grid.enableHdMenu
? '<a href="#"></a>'
: '',
'{value}<img src="',
Ext.BLANK_IMAGE_URL, '" />', '</div></td>');
}

if (!ts.body) {
ts.body = new Ext.Template('{rows}');
}

if (!ts.row) {
ts.row = new Ext.Template(
'<div style="{tstyle}"><table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<tbody><tr>{cells}</tr>',
(this.enableRowBody
? '<tr style="{bodyStyle}"><td colspan="{cols}" tabIndex="0" hidefocus="on"><div style="{style}" tabIndex="0" {cellAttr}>', '<div
* unselectable="on"
* {attr}>{value}</div>', "</td>" );
*/
ts.cell = new Ext.Template(
'<td style="{style}" tabIndex="0" {cellAttr}>',
'<div title="{tip}" {attr}>{value}</div>',
'</td>');
}

for (var k in ts) {
var t = ts[k];
if (t && typeof t.compile == 'function' && !t.compiled) {
t.disableFormats = true;
t.compile();
}
}

this.templates = ts;
this.colRe = new RegExp("x-grid3-td-([^\\s]+)", "");

},
// private
doRender : function(cs, rs, ds, startRow, colCount, stripe) {
var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount - 1;
var tstyle = 'width:' + this.getTotalWidth() + ';';
// buffers
var buf = [], cb, c, p = {}, rp = {
tstyle : tstyle
}, r;
for (var j = 0, len = rs.length; j < len; j++) {
r = rs[j];
cb = [];
var rowIndex = (j + startRow);
for (var i = 0; i < colCount; i++) {
c = cs[i];
p.id = c.id;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last
? 'x-grid3-cell-last '
: '');
p.attr = p.cellAttr = "";
p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
p.style = c.style;
if (p.value == undefined || p.value === "") {
p.value = " ";
} else {
p.tip = new String(p.value).replace(/<\/?.+?>/g, "");
}
if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
p.css += ' x-grid3-dirty-cell';
}

cb[cb.length] = ct.apply(p);
}
var alt = [];
if (stripe && ((rowIndex + 1) % 2 == 0)) {
alt[0] = "x-grid3-row-alt";
}
if (r.dirty) {
alt[1] = " x-grid3-dirty-row";
}
rp.cols = colCount;
if (this.getRowClass) {
alt[2] = this.getRowClass(r, rowIndex, rp, ds);
}
rp.alt = alt.join(" ");
rp.cells = cb.join("");
buf[buf.length] = rt.apply(rp);
}
return buf.join("");
}
});

<script type="text/javascript" src="/ext-extend.js"></script> 5 楼 congzi31 2011-03-14 请问,这个在ext2.0下效果倒是可以显示出来,可是gird的列就不能拖拽了,能帮解决下么 6 楼 congzi31 2011-03-14 在3.x下是没问题的

读书人网 >Web前端

热点推荐