Bloget

Hace un tiempo me encontré con la necesidad de crear un ComboBox en Gwt-Ext que dentro pudiera tener muchos resultados mostrados en forma de árbol, lo que, en un alarde de originalidad, he llamado “TreeComboBox”.

La forma de crearlo es fácil, aunque hay que darle un par de vueltas para conseguir el resultado que deseamos. Lo primero que debemos hacer es crear el ComboBox donde queremos visualizar el árbol:

ComboBox cb = new ComboBox();

cb.setEditable(false);
cb.setMinChars(0);
cb.setMode(ComboBox.LOCAL);
cb.setStore(new SimpleStore(”", new Object[] {”"}));
cb.setListAlign(”tl-bl”);
cb.setListWidth(250);
cb.setTpl(”<tpl for=’.'><div style=’height:200px’><div id=’”+cb.getId()+”‘></div></div></tpl>”);

Como podemos ver, creamos un ComboBox normalmente, cabe resaltar varias cosas:

• STORE: El Store se crea vacío ya que el Combo se va a nutrir del árbol.
• LISTALIGN y LISTWIDTH: Valores para el desplegable, se alinea a la izquierda y abajo con un ancho de 250px.
• TPL: Quizá el más importante, este template podeis copiarlo tal cual, pero la parte más importante es el ID del div (<div id=’”+cb.getId()+”‘>) porque es el identificador que utilizaremos para renderizar el árbol.

Posteriormente se ha de crear el árbol (para ver ejemplos visitar las demos de Gwt-ext) al que llamaremos INSIDETREE para tener la referencia.

Una vez realizados estos pasos veremos la forma de mantenerlos linkados:

cb.addListener(new ComboBoxListenerAdapter() {
public void onExpand(ComboBox comboBox) { insideTree.render(comboBox.getId()); }
});

Con este código conseguimos que, cuando se expanda el combo, se renderice el árbol dentro (”insideTree.render(comboBox.getId());”), fácil, ¿no?

Para tener un control sobre lo seleccionado en el árbol se debe añadir el siguiente código. Además con el click en el árbol podemos lanzar en el evento select del Combo en el caso de que lo necesitemos para que funcione como un ComboBox normal.

insideTree.addListener(new TreePanelListenerAdapter() {
public void onClick(TreeNode node, EventObject e) {
if(node.isLeaf()) {

//HACER LO NECESARIO CON LOS DATOS
collapse(); //CERRAMOS LA LISTA
fireEvent(”select”); // LANZAMOS EL EVENTO SELECT (Si se requiere)
}
}
});

Compártelo

Esta entrada fue publicada el Miércoles, 2 de Julio de 2008 a las 0:37 y está clasificada bajo: Espai Formación. Puede hacer un seguimiento de los comentarios de esta entrada gracias al feed RSS 2.0. Puede dejar un comentario, o enviar un trackback desde su sitio.