ExtJS 5:电子表格拖动选择显示单元格工具提示
ExtJS 5: spreadsheet drag select with shown cell tooltip
我有一个简单的电子表格网格(示例),每个单元格都有一个工具提示…我使用meta.tdAttr
为每个单元格添加工具提示。在Chrome中,显示工具提示后,当我开始从左上角单元格对角线拖动时,工具提示会妨碍并最终选择其文本。我不确定这是一个bug还是只是浏览器的行为(IE和FF不会产生这个问题,但在选择时确实会产生一点延迟)。不管怎样,这绝对是一个非常烦人的问题。它在这个例子中并不像在我的实际应用程序中那么普遍,但希望您能理解。
理想情况下,我会监听mousedown事件,并禁用显示工具提示,因为mousedown将表明选择即将发生。然后,当鼠标up被触发时,我可以启用在悬停时显示工具提示。
我看到了几个v4.2及更早版本的例子,但它们不再适用于v5.0+。我开始使用这个示例来创建单元格工具提示,但是如果我不知道列/行索引,就有点困难了。这让我想到了这个示例,它使用视图的uievent
来存储悬停的行和列索引。然而,在v4.2.1+中,这似乎并没有对每个单元悬停进行更新。在v4.2.0中,它工作得非常好。
是否有一种方法可以在鼠标悬停单元格上创建工具提示,并且还可以访问该单元格的行和列索引?
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
function columnRenderer(value, meta) {
meta.tdAttr = 'data-qtip="This is<br />some really<br />long tooltip, so I hope you do not mind reading it"';
return value;
}
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name',
renderer: columnRenderer
}, {
text: 'Email',
dataIndex: 'email',
flex: 1,
renderer: columnRenderer
}, {
text: 'Phone',
dataIndex: 'phone',
renderer: columnRenderer
}],
selModel: {
type: 'spreadsheet'
},
height: 800,
width: 800,
renderTo: Ext.getBody()
});
}
});
我拿起你的小提琴,对工具提示进行了一些调整。工具提示文本的选择应该消失。
https://fiddle.sencha.com/小提琴/tkc
var view = grid.getView();
var tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate:'td.x-grid-cell',// important for tooltip to be shown on each cell
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
//console.log(view.getRecord(tip.triggerElement));
var cellDOMRef = tip.triggerElement;
var rowRef = view.getRecord(tip.triggerElement);
var rowData = rowRef.data;
var cellValue = cellDOMRef.firstElementChild.innerHTML;
console.log(cellDOMRef,rowRef,rowData);
tip.update('Tooltip '+cellValue);
}
}
});
我在这里做的主要事情是创建一个Ext工具提示,并将其挂钩到电子表格网格的每个单元格。工具提示显示后,您将获得对该行的引用,以及可以访问单元格内容/值的单元格DOM,就像我在beforeshow函数中使用cellValue变量一样。希望这能解决你的问题。
编辑:为了能够获得列和行索引,您可以使用之前应用的呈现器,并使用tdAttr隐藏每个单元格的信息。这不是最好的方法,但它有效。
function columnRenderer(value, meta) {
meta.tdAttr = 'columnIndex="'+meta.columnIndex+'" rowIndex="'+meta.rowIndex+'"';
return value;
}
之前的小提琴应该更新
- ui网格将单元格显示为选择标记
- 单元格的工具提示或标题不显示超过2000个字符
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 使用下拉选择菜单高亮显示一行表格单元格
- 正在擦除要重新显示的单元格
- 每行仅突出显示一个单元格
- 将突出显示的单元格返回到php
- 只在表中突出显示一个单元格值
- 单击并用CTRL+C复制值时高亮显示html表格单元格
- 选择并高亮显示一行中的单元格
- jQuery 数据表根据单元格的列名突出显示单元格
- 根据选择高亮显示单元格边框(活动单元格)
- Jquery数据表,基于值突出显示单元格
- 在jqgrid中单击单元格时,如何突出显示单元格的整个内容?
- 单击时高亮显示单元格边框颜色,单击时改回其他颜色
- ExtJS 5:电子表格拖动选择显示单元格工具提示
- 动态地形成网格,有条件地显示单元格的底边框
- 如何正确使用谷歌可视化显示单元格'
- 用不同颜色高亮显示单元格
- 我如何在IE中实现突出显示单元格