icc.ui.tree

Representa un control que despliega una jerarquía de nodos y cada uno de ellos puede contener a su vez otros nodos.En esta estructura de arbol los nodos conteniendo a su vez a otros pueden mostrarse expandidos o no.

Metodos

create ();

Crea los objetos necesarios en el navegador.Este metódo es ejecutado automaticamente por el sistema al cargar un formulario realizado por el diseñador.Si está creando mediante código un control para incluir al formulario en tiempo de ejecución es necesario llamar a este metodo.


object getWnd ();

Retorna el objeto html que contiene el control.


updateItem ( object  item );
itemObjeto que representa el ítem a ser actualizado ( ver addItem para detalles).

Actualiza el texto o icono del item indicado.


rmvItem ( variant  item );
itemClave o referencia del objeto.

Elimina un ítem del arbol.


rmvChilds ( variant  item );
itemClave o referencia del objeto.

Elimina los subitems del ítem usado como argumento.


closeItem ( variant  item );
itemClave o referencia del objeto.

Pone el ítem usado como argumento en estado cerrado.


addItem ( object  item , [string  rootkey] );
itemObjeto a agregar en el árbol u opcionalmente un array de objetos.
Miembros del objeto
Tipo Nombre Descripcion
string id Clave única del ítem que lo identifica en el árbol.
string caption Etiqueta del ítem en el árbol.
string icon Icono del ítem cuando este no tiene subitems.
string iconOpen Icono cuando el ítem tiene subitems y está en modo abierto.
string iconClose Icono cuando el ítem tiene subitems y está en modo cerrado.
array items Array de subitems.
rootkeyClave del ítem padre en que el nuevo ítem quedará insertado. Si no se proporciona esta clave el ítem será insertado en la raíz del árbol.
Ejemplos
Agregar un arbol completo.
					
tree1.addItem([
    {caption:'Paises',
        items:[
            {caption:'Argentina'},
            {caption:'Brasil'},
            {caption:'Mexico'},
            {caption:'Uruguay'}
        ]
    },
    {caption:'Sucursales',
        items:[
            {caption:'Sucursal 1'},
            {caption:'Sucursal 2'},
            
        ]
    }
])


					
Agregar items y subitems
					
tree1.addItem({caption:'España'})
tree1.addItem({id:'uy',caption:'Uruguay'})
tree1.addItem({caption:'Montevideo'},'uy'); // usa el id de Uruguay como clave.                            

					

object getParent ( variant  item );
itemClave o referencia del objeto.

Devuelve el objeto padre el ítem indicado.


array getItems ( variant  item );
itemClave del ítem o referencia al ítem.

Retorna un array con los subitems del ítem indicado.


setItem ( variant  item );
itemClave del ítem o referencia al mismo (objeto).

Establece el ítem seleccionado en el árbol.


getOpenState ();

object getItem ();

Retorna el ítem seleccionado del árbol o undefined si no hay ninguno.

Eventos

onChange (function( object  item , object  parent ) { ... } )
itemÍtem seleccionado.
parentÍtem padre del ítem seleccionado o undefined si el ítem está en la raíz.

Evento disparado cuando el usuario selecciona un ítem del árbol.

Ejemplo
Visualizar datos auxiliares del ítem seleccionado.
					
tree1.onChange(function(item,parent){
    txPais.setText(item.caption);
    txId.setText(item.countryId);
});


					

onRightClick (function( object  item , object  parent ) { ... } )
itemÍtem seleccionado.
parentPadre del ítem seleccionado o undefined si este está en la raíz.

Evento disparado cuando el usuario presiona el botón derecho sobre un ítem del árbol.

Propiedades

boolean enabled

Estado habilitado o deshabilitado.


boolean visible

Controla la visibilidad del control.


integer tabIndex

Orden del foco del teclado al presionar la tecla TAB


string backColor

Color de fondo del control. El color es expresado en formato web #RRGGBB RR(rojo) GG(verde) BB(azul) ej. #FF0000 para el color rojo o en un nombre de color valido ej , green,red,yellow.


integer borderWidth

Ancho en pixels del borde del control


string borderColor

Color de borde del control. El color es expresado en formato web #RRGGBB RR(rojo) GG(verde) BB(azul) ej. #FF0000 para el color rojo o en un nombre de color valido ej , green,red,yellow.


array items

Array de items.

Ejemplo
					
var tree = new icc.ui.tree({
    items:[
        {caption:'Paises',
            items:[
                {caption:'Argentina'},
                {caption:'Brasil'},
                {caption:'Mexico'},
                {id:'uy',caption:'Uruguay'}
            ]
        },
        {caption:'Sucursales',
            items:[
                {caption:'Sucursal 1'},
                {caption:'Sucursal 2'},
            ]
        }
    ]
    
});