1.特定单元格悬浮提示
其中 gridStore1 为表格数据源，grid1 为表格设计。
//表格数据源
var gridStore1 = Ext.create('Ext.data.Store', {
proxy: {
type: "ajax",
actionMethods: { read: "POST" },
url: "demo.aspx?method=getData",
reader: { type: "json" }
},
fields: ['theId', 'theName', 'theDesc', 'theGrade', 'AlarmTime', 'AlarmDetail', 'ActualDuration', 'IsAck', 'AckTime', 'AckType', 'AckUser', 'AckDetail']
});
//表格结构设计
var grid1 = Ext.create('Ext.grid.Panel', {
forceFit: true,
title: '记录',
store: gridStore1,
columnLines: true,
columns: [
new Ext.grid.RowNumberer({ resizable: true }),
{
text: '名称',
width: 100,
dataIndex: 'theName'
},
{
text: '描述',
width: 150,
dataIndex: 'theDesc',
},
{
text: '等级',
width: 70,
align: 'center',
dataIndex: 'theGrade'
},
{
text: '时间',
width: 120,
align: 'center',
dataIndex: 'AlarmTime',
//renderer:rendererTip
},
{
text: '时间2',
width: 80,
align: 'center',
dataIndex: 'ActualDuration',
},
{
text: '是否',
width: 70,
align: 'center',
dataIndex: 'IsAck',
renderer: rendererColor
},
{
text: '确认',
width: 110,
align: 'center',
dataIndex: 'AckTime',
//renderer:rendererTip
},
{
text: '类型',
width: 100,
align: 'center',
dataIndex: 'AckType'
},
{
text: '人',
width: 100,
align: 'center',
dataIndex: 'AckUser'
},
{
text: '情况',
width: 120,
align: 'center',
dataIndex: 'AckDetail'
}, {
text: '详情',
width: 150,
dataIndex: 'AlarmDetail',
hidden: true,
}
],
listeners: {
containercontextmenu: function (ee, e, eOpts) //容器上的右键菜单
{
e.preventDefault(); //禁止容器上进行右键
},
itemcontextmenu: function (ee, record, item, index, e, eOpts) {
e.preventDefault();
menu1.showAt(e.getXY());
},
cellclick: function (ee, td, cellIndex, record, tr, rowIndex, e, eOpts) //单击弹出详情窗口
{
if (cellIndex == 6 || cellIndex == 8 || cellIndex == 10) //存在问题
{
var theContent;
var theTitle;
switch (cellIndex) {
case 6:
theContent = record.data["theProblem"];
theTitle = "存在问题";
break;
case 8:
theContent = record.data["theDemand"];
theTitle = "整改要求";
break;
case 10:
theContent = record.data["theProcess"];
theTitle = "整改情况";
break;
}
if (theContent != null && theContent != "") {
win1.setTitle(theTitle);
Ext.getCmp("theContent").setValue(theContent.replace(/\n/g, '<br>'));
win1.animateTarget = ee;
win1.show();
}
}
}
},
dockedItems: [
{
xtype: 'toolbar',
height: 30,
items: [
{
xtype: 'datefield',
id: 'theDateBegin',
name: 'theDateBegin',
editable: false,
labelWidth: 65,
labelAlign: 'right',
fieldLabel: '起止时间',
width: 200,
format: 'Y-m-d H:i',
listeners: {
render: function (ee) {
var now = new Date();
now = Ext.Date.add(now, Ext.Date.DAY, -1); //昨天
ee.setValue(Ext.Date.parse(Ext.Date.format(now, "Y-m-d") + configDayStr.substr(10), "Y-m-d H:i"));
}
}
},
'<div>-</div>',
{
xtype: 'datefield',
id: 'theDateEnd',
name: 'theDateEnd',
editable: false,
width: 130,
format: 'Y-m-d H:i',
value: new Date()
},
{
xtype: 'combo',
labelWidth: 65,
labelAlign: 'right',
width: 185,
id: 'theGrade1',
fieldLabel: '报警等级',
editable: false,
queryMode: 'local',
valueField: 'id',
displayField: 'text',
value: 0,
store: gradeStore
},
{
xtype: 'combo',
labelWidth: 65,
labelAlign: 'right',
width: 185,
id: 'ackType1',
fieldLabel: '确认类型',
editable: false,
queryMode: 'local',
valueField: 'id',
displayField: 'text',
value: -1,
store: typeStore
},
'->',
{
text: '确定',
width: 70,
handler: function () {
var theDateBegin = Ext.getCmp("theDateBegin").getValue();
var theDateEnd = Ext.getCmp("theDateEnd").getValue();
if (theDateBegin > theDateEnd) {
Ext.Msg.alert('错误', '开始日期不能大于截止日期！');
return;
}
//获取查询结果
var proxy1 = gridStore1.getProxy();
proxy1.extraParams = {
theDateBegin: Ext.Date.format(theDateBegin, 'Y-m-d'),
theDateEnd: Ext.Date.format(theDateEnd, 'Y-m-d'),
theGrade1: Ext.getCmp("theGrade1").getValue(),
ackType1: Ext.getCmp("ackType1").getValue()
};
gridStore1.load();
grid1.getSelectionModel().clearSelections(); //取消所有选中
}
},
' '
]
}
]
});
//特定列悬浮提示 这里选择第2列
grid1.on('itemmouseenter', function (view, record, item, index, e, eOpts) {
view.el //获取代表此组件的顶层元素
.clean(); //删除空的(Empty) 或者全是空格填充的文本节点
if (view.tip != null) {
view.tip.destroy();//销毁组件
}
//1.获取列号
var columnIndex = e.getTarget(view.cellSelector).cellIndex;
//当鼠标悬浮在特定列的单元格上面时给出悬浮提示框
if (columnIndex == 2) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// 所有的目标元素
target: view.el,
width: 150,
// 每个网格行导致其自己单独的显示和隐藏。
delegate: view.itemSelector,
// 在行上移动不能隐藏提示框
trackMouse: true,
// 立即呈现，tip.body可参照首秀前。
renderTo: Ext.getBody()
});
view.tip.on("beforeshow", function (tip) {
var gridColums = view.getGridColumns();
var column = gridColums[columnIndex];
tip.update(record.data["AlarmDetail"]);//获取鼠标悬浮单元格中的数据显示
});
}
});
//渲染函数
function rendererColor(data, cell, record, rowIndex, columnIndex, store) {
if (data == '未处理')
cell.style = "color: Red;";
return data;
}效果如下所示：
2 实现当鼠标悬浮在特定单元格上面的时候提示信息的方式显示当前单元格里面的内容
grid1.on('itemmouseenter', function (view, record, item, index, e, eOpts) {
if (view.tip == null) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own separate show and hide.
delegate: view.itemSelector,
// Moving within the row should not hide the tip.
// trackMouse: false,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody()
});
};
var gridColums = view.getGridColumns();
var column = gridColums[e.getTarget(view.cellSelector).cellIndex];
view.el.clean();
view.tip.update(record.data[column.dataIndex]);
});