Nell’articolo di oggi vedremo come integrare un tooltip in una datagrid sencha. \u00a0Nel fare questa attivit\u00e0 ho avuto qualche rimpianto per la semplicit\u00e0 di utilizzo di Flex, che permette di definire in modo semplice (tramite una sola properties) Il tooltip da far apparire per una determinata colonna.<\/p>\n
Con Sencha la cosa non \u00e8 cos\u00ec intuitiva, probabilmente esiste un modo molto semplice, ma non ho trovato una soluzione che mi soddisfacesse a pieno. \u00a0La soluzione che vi presento permette di definire un tooltip su un datagrid ed \u00e8 provata e testata su gxt\u00a03.1.0 e gwt\u00a02.6.1.<\/p>\n
La classe grid presenta una properties tooltip, ma essa riceve una string come argomento, pertanto si presta solo per tooltip statici, mentre la mia esigenza \u00e8 quella di un tooltip funzione della riga selezionata e ancora meglio della cella selezionata.<\/p>\n
Per soddisfare la necessit\u00e0 ho dovuto gestire gli eventi dell’oggetto, avrei sperato in una property della row ma le mie ricerche non hanno avuto esito positivo.<\/p>\n
Pertanto considerando di avere a che fare con un oggetto Grid della classe\u00a0com.sencha.gxt.widget.core.client.grid.Grid possiamo definire un handler sul mouse hover in questo modo:<\/p>\n
grid.addHandler(new MouseMoveHandler() {\r\n\r\n@Override\r\npublic void onMouseMove(MouseMoveEvent event) {\r\n\r\nBandoDG newHover = null;\r\nNativeEvent natev = event.getNativeEvent();\r\nif (Element.is(natev.getEventTarget())) {\r\nint hoverIdx = grid.getView().findRowIndex( Element.as(natev.getEventTarget()) );\r\nnewHover = grid.getStore().get(hoverIdx);\r\n}\r\n\r\nif (newHover == null) {\r\nreturn;\r\n}\r\n\r\nString note = newHover.getNote();\r\nString html = newHover.getOggetto();\r\nif (note!=null && !note.isEmpty()) {\r\nhtml = \"<span qtip='\" + note + \"'>\" + note + \"<br\/>\" + newHover.getOggetto() + \"<\/span>\";\r\n} \r\ngrid.setToolTip(html);\r\n\r\n}\r\n}, MouseMoveEvent.getType());<\/pre>\nTramite tale approccio riusciremo a vedere il tooltip al passare del mouse, un tooltip funzione del model associato al grid.<\/p>\n
Nei miei piano avrei v oluto anche gestire la comparsa e scomparsa del tooltip in funzione della colonna, ma i comandi relativi non hanno avuto l’effetto desiderato.<\/p>\n
In questo caso direi meglio questo che niente. Alla prossima<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Nell’articolo di oggi vedremo come integrare un tooltip in una datagrid sencha. \u00a0Nel fare questa attivit\u00e0 ho avuto qualche rimpianto per la semplicit\u00e0 di utilizzo di Flex, che permette di definire in modo semplice (tramite una sola properties) Il tooltip da far apparire per una determinata colonna. Con Sencha la cosa non \u00e8 cos\u00ec intuitiva, … Continua la lettura di TUTORIAL SENCHA GXT 2 \u2013 GESTIRE IL TOOLTIP IN UN GRID<\/span>