Uso de treepanel en extjs

TreePanel hereda de Panel y utiliza controles 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 de uso común incluyen texto, identificación, ícono, 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

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

loader: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 de uso común 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

expanded:fasle//Expandir, no expandido por defecto

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

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

leaf:true//Nodos de hoja, configurados según la situación

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

texto:"Nodo de texto"//Nodo de texto

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: "container",//El ID del elemento html aplicado

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

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

collapsible:true,

rootVisible:true,//Si se muestra el nodo raíz

autoScroll:true,

autoHeight:true,

autoHeight:true,

p>

ancho:150,

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

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

root:new?Ext.tree.AsyncTreeNode({

id:"raíz",

text:"nodo raíz",// nombre de nodo

expandido:true,//expandido

hoja:false,//si es un nodo hoja

niños:[{text:'child nodo uno', hoja: verdadero}, {id:'niño2',

text:'nodo secundario dos',children:[{text:"111"}]}]

})

});

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

})

Renderizado: