先给大家看看效果:
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数据库即可,希望可以对初学者有一点...
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...
在"Extjs4的TreeGrid例子"这个主题中,我们将深入探讨TreeGrid的各种特性,以及如何在实际项目中应用这些示例。 1. **多语言支持**:描述中提到的"多语言"功能在ExtJS 4中通常通过i18n(国际化)实现。开发人员可以...
TreeGrid是ExtJS中的一个组件,结合了树形视图和表格的优点,可以用来展示层次结构的数据并支持数据的排序、筛选和操作。在本实例中,我们关注的是如何利用ExtJS4实现一个TreeGrid来创建一个report报表。 首先,...
总结来说,"Extjs4 grid使用例子"是一个实践教程,展示了如何在MVC架构下利用ExtJS4的Grid组件处理数据,实现数据的增删改功能。通过这个例子,开发者可以学习到MVC的设计理念,以及如何有效利用Grid组件提升Web应用...
通过这些小例子,你可以了解如何使用ExtJS 4.1来创建用户界面,包括布局管理、组件系统、数据绑定、事件处理等核心概念。 描述中提到的".直接导入myeclipse即可",意味着这些示例代码是用Eclipse的MyEclipse插件...
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
使用extjs做的一个分割窗体的例子,入门型的,
本文将深入探讨一个使用ExtJS与Servlet进行数据交互的实际例子,这对于初学者理解这两者如何协同工作非常有帮助。 首先,我们来看Servlet的部分。Servlet是Java平台上的一个标准接口,用于扩展服务器的功能,特别是...
Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp
- **Proxy**:Store通过Proxy与数据源交互,支持远程和本地数据操作。 - **Model**:定义数据结构和字段,是Store和View之间的桥梁。 3. **数据网格(Data Grid)** - **GridPanel**:数据网格是显示大量表格...
2. **ExtJS4的本地化支持**:ExtJS4提供了内置的本地化支持,允许开发者轻松地为应用添加多语言功能。这通常通过加载特定的语言包来实现,这些语言包包含了组件的文本资源。 3. **languages.js**:这可能是一个包含...
这个例子可能会展示如何创建一个具有完整功能的文本编辑器组件,包括如何在ExtJS应用中加载KindEditor,如何配置编辑器,以及如何处理用户输入的数据。开发者可以从这个例子中学到如何将第三方库集成到自己的ExtJS...
extJs源码以及很多例子,供初学者学习
总结来说,`Ext.Panel`和`TreePanel`在EXTJS中是两个关键的组件,它们支持动态加载本地数据,提高了用户体验。理解这两个组件的工作原理和如何利用`Store`、`Ajax`、`TreeStore`进行数据加载,是EXTJS开发中的重要...
本压缩包文件"Extjs+Dwr"提供了一个整合ExtJS和DWR的例子,让我们来详细探讨一下这两个技术以及它们的整合过程。 **ExtJS** 是一个JavaScript库,主要用于构建桌面级的Web应用。它提供了一套完整的UI组件,包括数据...
extjs4是权限 网络分享资料中修改而来。 extjs4+ spring3 + hibernate3.3+ struts2.1.8 + mysql5.04+ xp + myEclipse 8.5 测试通过 。 extjsdemo.rar
这个例子可以帮助你理解EXTJS MVC的架构,并提供了一个实际操作的基础,你可以根据自己的需求进行改造和扩展。通过学习这个案例,你将学会如何组织代码,如何定义模型和视图,如何编写控制器以响应用户操作,以及...
在本文中,我们将探讨如何结合 ExtJS、JSON 和 Struts2 实现一个动态加载的树形菜单。ExtJS 是一个流行的 JavaScript 框架,用于...这个例子展示了如何在实际开发中灵活应对数据格式差异,以实现跨技术栈的无缝集成。