{"id":487,"date":"2012-09-05T01:20:13","date_gmt":"2012-09-05T01:20:13","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=487"},"modified":"2012-09-05T01:20:13","modified_gmt":"2012-09-05T01:20:13","slug":"extjs-tooltip-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-tooltip-example\/","title":{"rendered":"ExtJS Tooltip Example"},"content":{"rendered":"

Problem<\/strong>
\nYou want to display a grid with a tooltip.<\/p>\n

Tested in ExtJS Version<\/strong>
\n4.1.1<\/p>\n

Screenshot<\/strong>
\n\"\"<\/a><\/p>\n

Solution<\/strong>
\nSet the “tip” property on the GridPanel’s view (panel.getView().tip).<\/p>\n

view = this.getView();\nview.tip = Ext.create('Ext.tip.ToolTip', {\n\ttarget: view.el,\n\tdelegate: view.itemSelector,\n\ttrackMouse: true,\n\trenderTo: Ext.getBody(),\n\tlisteners: {\n     \t\tbeforeshow: function updateTipBody(tip) {\n     \t\t\t tip.update(\"Tooltip!\");\n        }\n}<\/pre>\n
Discussion<\/strong>
\nThe example ExtJS provides in their documentation did not work for me. In their example, they run this code in a the render event, which they set after the grid object is created- for whatever reason this only works in afterrender.<\/p>\n
You can retrieve the highlighted row inside the beforeshow event using view.getRecord(tip.triggerElement), but it is not clear how to determine which column the tooltip is rendered on.<\/p>\n
See the ExtJS GridView example<\/a> for further discussion.<\/p>\n
The full source is below.<\/p>\n
Ext.onReady(function() {\nvar trackStore = new Ext.data.Store({\n  storeId: 'soundCloudStore',\n\n    proxy: {\n      type: 'ajax',\n      url: 'blues.json',\n      reader: {\n        type: 'json',\n        idProperty: 'id'\n      }\n    },\n    fields:['duration', 'genre', 'created_at', 'title', 'id']\n});\n\ntrackStore.load(\n  function() { \n    Ext.create('Ext.grid.Panel', {\n      title: 'Tracks',\n      store: trackStore,\n      stripeRows: false,\n      columns: [\n        { header: 'Title', dataIndex: 'title' },\n        { header: 'Duration',  dataIndex: 'duration' },\n        { header: 'Genre', dataIndex: 'genre' },\n        { header: 'Created At', dataIndex: 'created_at'}\n      ],\n      height: 200,\n      width: 475,\n      renderTo: Ext.getBody(),\n      listeners: {\n        afterrender: function( eOpts )\n        {\n          view = this.getView();\n          view.tip = Ext.create('Ext.tip.ToolTip', {\n            target: view.el,\n            delegate: view.itemSelector,\n            trackMouse: true,\n            renderTo: Ext.getBody(),\n            listeners: {\n              beforeshow: function updateTipBody(tip) {\n              tip.update(\"Tooltip!\");\n            }\n          }\n        });\n      }\n    }\n  });\n});\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"
Problem You want to display a grid with a tooltip. Tested in ExtJS Version 4.1.1 Screenshot Solution Set the “tip” property on the GridPanel’s view (panel.getView().tip). view = this.getView(); view.tip = Ext.create(‘Ext.tip.ToolTip’, { target: view.el, delegate: view.itemSelector, trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { tip.update(“Tooltip!”); } } Discussion The example ExtJS provides … <\/p>\n
Continue reading “ExtJS Tooltip Example”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[213,216,218,224,502],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t