Nell’articolo di oggi vedremo come integrare un tooltip in una datagrid sencha. Nel fare questa attività ho avuto qualche rimpianto per la semplicità 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 è così intuitiva, probabilmente esiste un modo molto semplice, ma non ho trovato una soluzione che mi soddisfacesse a pieno. La soluzione che vi presento permette di definire un tooltip su un datagrid ed è provata e testata su gxt 3.1.0 e gwt 2.6.1.
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 è quella di un tooltip funzione della riga selezionata e ancora meglio della cella selezionata.
Per soddisfare la necessità ho dovuto gestire gli eventi dell’oggetto, avrei sperato in una property della row ma le mie ricerche non hanno avuto esito positivo.
Pertanto considerando di avere a che fare con un oggetto Grid della classe com.sencha.gxt.widget.core.client.grid.Grid possiamo definire un handler sul mouse hover in questo modo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
grid.addHandler(new MouseMoveHandler() { @Override public void onMouseMove(MouseMoveEvent event) { BandoDG newHover = null; NativeEvent natev = event.getNativeEvent(); if (Element.is(natev.getEventTarget())) { int hoverIdx = grid.getView().findRowIndex( Element.as(natev.getEventTarget()) ); newHover = grid.getStore().get(hoverIdx); } if (newHover == null) { return; } String note = newHover.getNote(); String html = newHover.getOggetto(); if (note!=null && !note.isEmpty()) { html = "<span qtip='" + note + "'>" + note + "<br/>" + newHover.getOggetto() + "</span>"; } grid.setToolTip(html); } }, MouseMoveEvent.getType()); |
Tramite tale approccio riusciremo a vedere il tooltip al passare del mouse, un tooltip funzione del model associato al grid.
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.
In questo caso direi meglio questo che niente. Alla prossima