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]); });

?

總結

以上是生活随笔為你收集整理的ExtJS 表格悬浮提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。