1.特定單元格懸浮提示

其中 gridStore1 為表格數(shù)據(jù)源，grid1 為表格設(shè)計。

//表格數(shù)據(jù)源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']});//表格結(jié)構(gòu)設(shè)計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: '確認(rèn)',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: '確認(rèn)類型',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;}//獲取查詢結(jié)果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列g(shù)rid1.on('itemmouseenter', function (view, record, item, index, e, eOpts) { view.el //獲取代表此組件的頂層元素 .clean(); //刪除空的(Empty) 或者全是空格填充的文本節(jié)點 if (view.tip != null) {view.tip.destroy();//銷毀組件 }//1.獲取列號 var columnIndex = e.getTarget(view.cellSelector).cellIndex;//當(dāng)鼠標(biāo)懸浮在特定列的單元格上面時給出懸浮提示框 if (columnIndex == 2) {view.tip = Ext.create('Ext.tip.ToolTip', {// 所有的目標(biāo)元素 target: view.el,width: 150,// 每個網(wǎng)格行導(dǎo)致其自己單獨的顯示和隱藏。 delegate: view.itemSelector,// 在行上移動不能隱藏提示框 trackMouse: true,// 立即呈現(xiàn)，tip.body可參照首秀前。 renderTo: Ext.getBody()});view.tip.on("beforeshow", function (tip) {var gridColums = view.getGridColumns();var column = gridColums[columnIndex];tip.update(record.data["AlarmDetail"]);//獲取鼠標(biāo)懸浮單元格中的數(shù)據(jù)顯示 });}});//渲染函數(shù)function rendererColor(data, cell, record, rowIndex, columnIndex, store) {if (data == '未處理')cell.style = "color: Red;";return data;}

效果如下所示：

2 實現(xiàn)當(dāng)鼠標(biāo)懸浮在特定單元格上面的時候提示信息的方式顯示當(dāng)前單元格里面的內(nèi)容

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。