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: