树的理解:
<div id="tree-div"></div> </body> <script type="text/javascript"> Ext.onReady(function(){ var tree = new Ext.tree.TreePanel({ renderTo:'tree-div', //树放在 页面的那个元素上 title:'tree', height:500, width:300, collapsed:false, animate:true, //展开的时候是否 显示动画 useArrows:true, //是否用箭头的 下拉 enableDD:true, //是否可以拖动 frame:true, //填充 面板背景颜色 autoScroll: true, //树超过容器 是否有滚动条 containerScroll:true, rootVisible:true, //是否显示根节点 root:{ nodeType:'async', text:'根节点', //根显示的名称 id:'root', expended:true }, // auto create TreeLoader dataUrl:'/test/tree/data/check-nodes.json', listeners:{ 'checkchange':function( node , checked ){ //被选中的时候 if(checked ){ //alert(node.text); //node.getUI().addClass('complete') }else{ //node.getUI().removeClass('complete'); } }, 'click':function(node ,event ){ //alert(node.text); //取出节点显示的名称 //node.setText('名称改变'); //改变节点显示的名称 //node.expand(true);//将节点展开 动作带有动画 Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + node.attributes.text + '"'); //弹出框的使用 } }, tbar:new Ext.Toolbar({ items:[{ text:'工具栏' }] }), bbar:new Ext.Toolbar({ items:[{ text:'状态栏' }] }), fbar: [{ text: 'fbar Left' },'->',{ text: 'fbar Right' }] }); tree.getRootNode().expand( true ); //树初始化的时候完全展开 }); </script>
数据:
[{ text: 'To Do', cls: 'folder', children: [{ text: 'Go jogging', leaf: true, checked: false },{ text: 'Take a nap', leaf: true, checked: false },{ text: 'Climb Everest', leaf: true, checked: false }] },{ text: 'Grocery List', cls: 'folder', children: [{ text: 'Bananas', leaf: true, checked: false },{ text: 'Milk', leaf: true, checked: false },{ text: 'Cereal', leaf: true, checked: false },{ text: 'Energy foods', cls: 'folder', children: [{ text: 'Coffee', leaf: true, checked: false },{ text: 'Red Bull', leaf: true, checked: false }] }] },{ text: 'Remodel Project', cls: 'folder', children: [{ text: 'Finish the budget', leaf: true, checked: false },{ text: 'Call contractors', leaf: true, checked: false },{ text: 'Choose design', leaf: true, checked: false }] }]
相关推荐
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
Ext.tree 实例代码文件 并附带封装的json类 ,工程源码,相互指教!
用ext + xml文件 完成 ext tree panel 树结构。延迟加载,支持 多选 单选。前后台数据交互使用的是 json串,挺不错的
ext tree json 例子(不含EXT包)
AnyFo - Util - Json4Ext Json4Ext项目背景 在大家开发的系统中,如果程序用ExtJS做表现层,那么就需要使ExtJS开发的界面和后台Java代码中生成的数据交互,一般来说,可以...4. ExtJS中的Tree控件需要的Json字符串
json Ext4 treejson
Ext tree 实现的是一棵异步加载的Tree,完整Demo项目,导入Eclipse就可以运行
Ext4+JSON+Servlet/Struts2+Ext.tree.Panel+Ext.tab.Panel构建Web应用系统框架
NULL 博文链接:https://chen4w.iteye.com/blog/1460417
Extjs Tree + JSON + Struts2 例子
博文链接:https://gznofeng.iteye.com/blog/221499
省市区3级数据,ID为全国数据
NULL 博文链接:https://penggle.iteye.com/blog/803350
以前有许多人需要将 tree 的节点拖拽到其他控件中的问题,前段时间已经解决了,现在也将它的源代码贡献上来。 这个树的数据是静态的,没有做动态的,而且树节点的拖拽也没有做过多的处理,如果要知道怎么样做树...
一个简单的ext java web项目 有gird form tree boder布局 如果有人觉的有用,会继续完善
Extjs Tree + JSON + Struts2 示例源代码
先前项目有用到EXT 动态生成树的需要,这是自己写的一个树的实例,有需要的可以下载,只需要改动下数据库就好,也可以联系我,共同进步!
37、Ext.data.SimpleStore类 ………… 34 38、Ext.data.Tree类 …………………… 34 39、Ext.data.Node类 ………………… 34 40、Ext.Action类 ……………………… 35 41、Ext.Button类 …………………… 36 42、Ext...
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. SplitButton...
本文是自己看了很多extjs搜索的的内容,实现的最简洁的方式,不是直接调用ext 自带的方法,自己从后台查询,效率相对较高。