extjs中treepanel例子

//TreePanel配置参数

animate:true//展开,收缩动画,false时,则没有动画效果

autoHeight:true//自动高度,默认为false

enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable

enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)

enableDrop:true//仅仅drop

lines:true//节点间的虚线条

loader:Ext.tree.TreeLoader//加载节点数据

root:Ext.tree.TreeNode//根节点

rootVisible:false//false不显示根节点,默认为true

trackMouseOver:false//false则mouseover无效果

useArrows:true//小箭头

		

//TreeNode常用配置参数

checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框

expanded:fasle//展开,默认不展开

href:"http:/www.cnblogs.com"//节点的链接地址

hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开

leaf:true//叶子节点,看情况设置

qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下

text:"节点文本"//节点文本

singleClickExpand:true//用单击文本展开,默认为双击

		

Ext.onReady(function()...{

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

       el:"container",//应用到的html元素id

       animate:true,//以动画形式伸展,收缩子节点

       title:"Extjs静态树",

       collapsible:true,

       rootVisible:true,//是否显示根节点

       autoScroll:true,

       autoHeight:true,

       width:150,

       lines:true,//节点之间连接的横竖线

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

       root:new Ext.tree.AsyncTreeNode(...{

           id:"root",

           text:"根节点",//节点名称

           expanded:true,//展开

           leaf:false,//是否为叶子节点

           children:[...{text:'子节点一',leaf:true},...{id:'child2',text:'子节点二',children:[...{text:"111"}]}]

       })

   });

   mytree.render();//不要忘记render()下,不然不显示哦

})

		

Ext.onReady(function()...{

    Ext.QuickTips.init();

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

       el:"container",

       animate:true,

       title:"Extjs静态树",

       collapsible:true,

       enableDD:true,

       enableDrag:true,

       rootVisible:true,

       autoScroll:true,

       autoHeight:true,

       width:150,

       lines:true

   });

   

   //根节点

   var root=new Ext.tree.TreeNode(...{

       id:"root",

       text:"控制面板",

       expanded:true

   });

   

   //第一个子节点及其子节点

   var sub1=new Ext.tree.TreeNode(...{

       id:"news",

       text:"新闻管理",

       singleClickExpand:true

   });

   sub1.appendChild(new Ext.tree.TreeNode(...{

       id:"addNews",

       text:"添加新闻",

       href:"http://www.baidu.com",

       hrefTarget:"mainFrame",

       qtip:"打开百度",

       listeners:...{//监听

          "click":function(node,e)...{

                      alert(node.text)

                  }

       }

   }));

   sub1.appendChild(new Ext.tree.TreeNode(...{

       id:"editNews",

       text:"编辑新闻"

   }));

   sub1.appendChild(new Ext.tree.TreeNode(...{

       id:"delNews",

       text:"删除新闻"

   }));

   

   root.appendChild(sub1);

   

   root.appendChild(new Ext.tree.TreeNode(...{

        id:"sys",

        text:"系统设置"

   }));

   

   mytree.setRootNode(root);//设置根节点

   

   mytree.render();//不要忘记render()下,不然不显示哦

})

		

Ext.onReady(function()...{

    Ext.QuickTips.init();

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

       el:"container",

       animate:true,

       title:"简单Extjs动态树",

       collapsible:true,

       enableDD:true,

       enableDrag:true,

       rootVisible:true,

       autoScroll:true,

       autoHeight:true,

       width:150,

       lines:true,

       //这里简简单单的loader的几行代码是取数据的,很经典哦

       loader:new Ext.tree.TreeLoader(...{

          dataUrl:"json。ashx"

       })

   });

   

   //根节点

   var root=new Ext.tree.AsyncTreeNode(...{

       id:"root",

       text:"控制面板",

       expanded:true

   });

 

  
标签：treepanel extjs   
 
 



              
上一篇：extjs中treepanel属性和方法
                	  
			  
下一篇：extjs XTemplate的实例

  
 


  

      您可能感兴趣
				

					

  
extjs中treepanel属性和方法
  
extjs中treepanel例子
每周一首古诗 《绝句》（每周一首古诗绝句）
蓝色代表什么（蓝色代表什么性格的人）
红色代表什么（红色代表什么情感和含义）
南宋志南和尚绝句 杨柳风似庙中来（南宋志南和尚绝句）
今天要穿什么颜色（今天要穿什么颜色的衣服最吉利）
一道高中题-求杯子的高度（一道高中题-求杯子的高度）