{"id":394,"date":"2014-12-21T00:05:39","date_gmt":"2014-12-20T23:05:39","guid":{"rendered":"http:\/\/www.valeriofinazzo.it\/wordpress\/?p=394"},"modified":"2014-12-21T00:05:39","modified_gmt":"2014-12-20T23:05:39","slug":"tutorial-sencha-gxt-3-gestire-il-tooltip-in-un-grid-la-rivincita","status":"publish","type":"post","link":"http:\/\/www.valeriofinazzo.it\/wordpress\/2014\/12\/tutorial-sencha-gxt-3-gestire-il-tooltip-in-un-grid-la-rivincita\/","title":{"rendered":"TUTORIAL SENCHA GXT 3 \u2013 GESTIRE IL TOOLTIP IN UN GRID &#8211; LA RIVINCITA"},"content":{"rendered":"<p>Ho continuato lo studio per gestire il tooltip in un datagrid gxt. Il giro \u00e8 un p\u00f2 pi\u00f9 complesso di quello che pensavo, ma neanche tanto, basta cambiare il punto di vista.<\/p>\n<p>Il Grid \u00e8 definito aggiungendo le colonne una per una e associando a ciascuna di esse una configurazione, tramite la classe\u00a0ColumnConfig.<\/p>\n<p>Ipotizziamo di voler creare un classico grid con 2\u00a0colonne e di voler attivare il tooltip sia sull&#8217;intestazione che sul contenuto.<\/p>\n<pre class=\"lang:default decode:true \">ColumnConfig&lt;BandoDG, String&gt; dataOperazione = new ColumnConfig&lt;BandoDG, String&gt;(props.dataPubblicazione(), 10, \"Data Operazione\");\r\ndataOperazione.setToolTip(SafeHtmlUtils.fromString(\"Data Operazione\"));\r\ndataOperazione.setHorizontalAlignment(ColumnConfig.ALIGN_RIGHT);\r\nColumnConfig&lt;BandoDG, String&gt; descrizione = new ColumnConfig&lt;BandoDG, String&gt;(props.oggetto(), 50, \"Descrizione\");\r\ndescrizione.setToolTip(SafeHtmlUtils.fromString(\"Descrizione\"));<\/pre>\n<p>Con la chiamata setToolTip stabiliamo il tooltip associato all&#8217;intestazione.<\/p>\n<p>Adesso definiamo il tooltip a livello di cella. \u00a0Per fare ci\u00f2\u00a0ci viene in soccorso la classe TextCell, e ridefinendo la funzione di render in modo da associare un tooltip alla singola cella<\/p>\n<pre class=\"lang:default decode:true\">TextCell textCell = new TextCell(){\r\n@Override\r\npublic void render(com.google.gwt.cell.client.Cell.Context context,\r\nString value, SafeHtmlBuilder sb) {\r\nString tooltipValue = value;\r\nString cellValue = value;\r\nsb.appendHtmlConstant(\"&lt;span qtip=\\\"\"+tooltipValue+\"\\\"&gt;\"+cellValue+\"&lt;\/span&gt;\");\r\n}\r\n};\r\ndescrizione.setCell(textCell);\r\ndataOperazione.setCell(textCell);<\/pre>\n<p>Per attivare il tooltip occorre instanziare un oggetto QuickTip associandolo al grid<\/p>\n<pre class=\"lang:default decode:true\">new QuickTip(grid);<\/pre>\n<p>e a questo punto invocando il datagrid sar\u00e0 visibile il tooltip a livello di cella.<\/p>\n<p><a href=\"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2014\/12\/tooltip.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-399\" src=\"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2014\/12\/tooltip-300x65.png\" alt=\"tooltip\" width=\"300\" height=\"65\" srcset=\"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2014\/12\/tooltip-300x65.png 300w, http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2014\/12\/tooltip.png 498w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ho continuato lo studio per gestire il tooltip in un datagrid gxt. Il giro \u00e8 un p\u00f2 pi\u00f9 complesso di quello che pensavo, ma neanche tanto, basta cambiare il punto di vista. Il Grid \u00e8 definito aggiungendo le colonne una per una e associando a ciascuna di esse una configurazione, tramite la classe\u00a0ColumnConfig. Ipotizziamo di &hellip; <a href=\"http:\/\/www.valeriofinazzo.it\/wordpress\/2014\/12\/tutorial-sencha-gxt-3-gestire-il-tooltip-in-un-grid-la-rivincita\/\" class=\"more-link\">Continua la lettura di <span class=\"screen-reader-text\">TUTORIAL SENCHA GXT 3 \u2013 GESTIRE IL TOOLTIP IN UN GRID &#8211; LA RIVINCITA<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[75,17,19,74],"_links":{"self":[{"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/posts\/394"}],"collection":[{"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":5,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/posts\/394\/revisions"}],"predecessor-version":[{"id":400,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/posts\/394\/revisions\/400"}],"wp:attachment":[{"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/media?parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/categories?post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/tags?post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}