La Red de Conocimientos Pedagógicos - Currículum vitae - Uso de treepanel en extjs

Uso de treepanel en extjs

TreePanel hereda de Panel y utiliza el control de árbol en ExtJS para implementar funciones complejas con propiedades y métodos ricos. Entre ellos, Ext.tree.TreeNode representa un nodo de árbol. Los atributos más utilizados incluyen texto, identificación, icono, marcado, etc., árbol asincrónico Ext.tree.AsyncTreeNode y cargador de árbol Ext.tree.TreeLoader.

Aquí hay algunos ejemplos de treepanel en extjs:

1. Parámetros de configuración básicos de TreePanel:

//Parámetros de configuración de TreePanel

animate: true//Expand, reducir animación, cuando es falso, no hay efecto de animación

autoHeight: true//Altura automática, el valor predeterminado es falso

enableDrag: true//El nodo del árbol se puede arrastrar Arrastrar (el efecto es), tenga en cuenta que no se puede arrastrar

enableDD: true//No solo puede arrastrar, sino que también puede cambiar la jerarquía de nodos (arrastrar y soltar) mediante Arrastrar

enableDrop: true//Solo soltar

líneas: true//Líneas de puntos entre nodos

cargador: Ext.tree.TreeLoader//Cargar datos del nodo

root: Ext.tree.TreeNode //Nodo raíz

rootVisible: false//false no muestra el nodo raíz, el valor predeterminado es verdadero

trackMouseOver: false//false , pasar el mouse no tiene ningún efecto

useArrows: true//Flecha pequeña

2 Parámetros de configuración básicos de TreeNode:

//Parámetros de configuración comunes de TreeNode

marcado: falso // verdadero está en el texto Hay una casilla de verificación seleccionada delante de él, falso significa que hay una casilla de verificación sin marcar delante del texto y no hay ninguna casilla de forma predeterminada

expandido: fasle//Expandir, no expandido por defecto

href: "blogs.com"//La dirección de enlace del nodo

hrefTarget: "mainFrame"//El valor predeterminado la dirección del enlace del nodo abierto está en blanco, que se puede configurar en la identificación del nombre del iframe, luego se abrirá en el iframe

leaf: true//Nodo hoja, configurado según la situación

qtip: "Preguntar"//Solicitar información, pero ¿la necesita?Ext.QuickTips.init(); siguiente

texto: "Texto del nodo"//Texto del nodo

singleClickExpand: true//Expandir haciendo clic en el texto, el valor predeterminado es hacer doble clic

3. Instancia de Treepanel:

El primer árbol estático: el árbol más simple: Ext.onReady( function(){

var?mytree=new?Ext.tree.TreePanel({

el: "contenedor", //ID del elemento html aplicado

animate: true, //Extiende y reduce los nodos secundarios en forma de animación

título: "Árbol estático Extjs",

p>

collapsible: true,

rootVisible : verdadero, //si mostrar el nodo raíz

autoScroll: verdadero,

autoHeight: verdadero,

p>

ancho: 150,

lines: true, // Líneas horizontales y verticales que conectan nodos

loader: new?Ext.tree.TreeLoader(), //

root: new? Ext.tree.AsyncTreeNode({

id: "raíz",

texto: "nodo raíz", // nombre del nodo

>expandido: verdadero, //expandido

hoja: falso, //si es un nodo hoja

niños: [{text: 'Nodo hijo uno', hoja: verdadero} , { id: 'niño2', texto: 'nodo hijo dos', hijos: [{text: "111"}]}]

})

});

mytree.render(); //No olvides hacer clic en render(), de lo contrario no se mostrará

})

Renderizado: