先给大家看看效果:
html中引入如下: <link rel="stylesheet" type="text/css" href="static/extjs/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="static/extjs/ux/treegrid.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="static/extjs/css/icon.css" /> <script type="text/javascript" src="static/extjs/js/ext-base.js"></script> <script type="text/javascript" src="static/extjs/js/ext-all.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridSorter.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridColumnResizer.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridNodeUI.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridLoader.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridColumns.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGrid.js"></script>
<script type="text/javascript" > var data=[{ task:'Project: Shopping', duration:13.25, user:'Tommy Maintz', iconCls:'task-folder', expanded: true, children:[{ task:'Housewares', duration:1.25, user:'Tommy Maintz', iconCls:'task-folder', children:[{ task:'Kitchen supplies', duration:0.25, user:'Tommy Maintz', leaf:true, iconCls:'task' },{ task:'Groceries', duration:.4, user:'Tommy Maintz', leaf:true, iconCls:'task' },{ task:'Cleaning supplies', duration:.4, user:'Tommy Maintz', leaf:true, iconCls:'task' },{ task: 'Office supplies', duration: .2, user: 'Tommy Maintz', leaf: true, iconCls: 'task' }] }, { task:'Remodeling', duration:12, user:'Tommy Maintz', iconCls:'task-folder', expanded: true, children:[{ task:'Retile kitchen', duration:6.5, user:'Tommy Maintz', leaf:true, iconCls:'task' },{ task:'Paint bedroom', duration: 2.75, user:'Tommy Maintz', iconCls:'task-folder', children: [{ task: 'Ceiling', duration: 1.25, user: 'Tommy Maintz', iconCls: 'task', leaf: true }, { task: 'Walls', duration: 1.5, user: 'Tommy Maintz', iconCls: 'task', leaf: true }] },{ task:'Decorate living room', duration:2.75, user:'Tommy Maintz', leaf:true, iconCls:'task' },{ task: 'Fix lights', duration: .75, user: 'Tommy Maintz', leaf: true, iconCls: 'task' }, { task: 'Reattach screen door', duration: 2, user: 'Tommy Maintz', leaf: true, iconCls: 'task' }] }] },{ task:'Project: Testing', duration:2, user:'Core Team', iconCls:'task-folder', children:[{ task: 'Mac OSX', duration: 0.75, user: 'Tommy Maintz', iconCls: 'task-folder', children: [{ task: 'FireFox', duration: 0.25, user: 'Tommy Maintz', iconCls: 'task', leaf: true }, { task: 'Safari', duration: 0.25, user: 'Tommy Maintz', iconCls: 'task', leaf: true }, { task: 'Chrome', duration: 0.25, user: 'Tommy Maintz', iconCls: 'task', leaf: true }] },{ task: 'Windows', duration: 3.75, user: 'Darrell Meyer', iconCls: 'task-folder', children: [{ task: 'FireFox', duration: 0.25, user: 'Darrell Meyer', iconCls: 'task', leaf: true }, { task: 'Safari', duration: 0.25, user: 'Darrell Meyer', iconCls: 'task', leaf: true }, { task: 'Chrome', duration: 0.25, user: 'Darrell Meyer', iconCls: 'task', leaf: true },{ task: 'Internet Exploder', duration: 3, user: 'Darrell Meyer', iconCls: 'task', leaf: true }] },{ task: 'Linux', duration: 0.5, user: 'Aaron Conran', iconCls: 'task', children: [{ task: 'FireFox', duration: 0.25, user: 'Aaron Conran', iconCls: 'task', leaf: true }, { task: 'Chrome', duration: 0.25, user: 'Aaron Conran', iconCls: 'task', leaf: true }] }] }]; Ext.onReady(function() { Ext.QuickTips.init(); var tree = new Ext.ux.tree.TreeGrid({ title: 'Core Team Projects', width: 500, height: 300, renderTo: Ext.getBody(), enableDD: true, columns:[{ header: 'Task', dataIndex: 'task', width: 230 },{ header: 'Duration', width: 100, dataIndex: 'duration', align: 'center', sortType: 'asFloat', tpl: new Ext.XTemplate('{duration:this.formatHours}', { formatHours: function(v) { if(v < 1) { return Math.round(v * 60) + ' mins'; } else if (Math.floor(v) !== v) { var min = v - Math.floor(v); return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm'; } else { return v + ' hour' + (v === 1 ? '' : 's'); } } }) },{ header: 'Assigned To', width: 150, dataIndex: 'user' }] }); var root = new Ext.tree.TreeNode({ text: '根节点', expanded: true }); tree.setRootNode(root); var nodes = {}; nodes.children =data;/*TreeGrid的json数据[{……},{……}]*/ appendChild(root, nodes); }); function appendChild(node, o) { if (o.children != null && o.children.length > 0) { for (var a = 0; a < o.children.length; a++) { var n = new Ext.tree.TreeNode({ task:o.children[a].task, duration:o.children[a].duration, user:o.children[a].user, iconCls:o.children[a].iconCls }); node.appendChild(n); appendChild(n, o.children[a]); } } } </script>
这样就能跑起来了。我把例子传到附件了。可以直接跑
相关推荐
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...
用extjs4 TreeGrid做的report报表
一个包含多语言的TreeGrid例子集合。
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
使用extjs做的一个分割窗体的例子,入门型的,
extjs和servlet数据交互的例子,对初次接触这方面的学习很有帮助
基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子
Extjs+Kindeditor的例子
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可
Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp
extJs源码以及很多例子,供初学者学习
extjs4是权限 网络分享资料中修改而来。 extjs4+ spring3 + hibernate3.3+ struts2.1.8 + mysql5.04+ xp + myEclipse 8.5 测试通过 。 extjsdemo.rar
我收集了各种ExtJS的例子,有3.2还有2.5,还有所有“掏钱学ExtJS”的例子,绝对物超所值。
Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv
ExtJs3.1目前所有例子源代码,合适初学者
此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...
extjs—登陆小例子
ExtJs .net下面的例子,后台交互等 很详细,