`

Extjs treeGrid 本地数据 例子

阅读更多
先给大家看看效果:

 
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>

 这样就能跑起来了。我把例子传到附件了。可以直接跑

  • 大小: 52.3 KB
分享到:
评论

相关推荐

    SSH Extjs treeGrid conboxTree 分页实例

    最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...

    ExtJs4.1 treegrid CRUD 读取、新增、修改、删除

    实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...

    Extjs4的TreeGrid例子

    在"Extjs4的TreeGrid例子"这个主题中,我们将深入探讨TreeGrid的各种特性,以及如何在实际项目中应用这些示例。 1. **多语言支持**:描述中提到的"多语言"功能在ExtJS 4中通常通过i18n(国际化)实现。开发人员可以...

    extjs4 treeGrid实例

    TreeGrid是ExtJS中的一个组件,结合了树形视图和表格的优点,可以用来展示层次结构的数据并支持数据的排序、筛选和操作。在本实例中,我们关注的是如何利用ExtJS4实现一个TreeGrid来创建一个report报表。 首先,...

    Extjs4 grid使用例子

    总结来说,"Extjs4 grid使用例子"是一个实践教程,展示了如何在MVC架构下利用ExtJS4的Grid组件处理数据,实现数据的增删改功能。通过这个例子,开发者可以学习到MVC的设计理念,以及如何有效利用Grid组件提升Web应用...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    通过这些小例子,你可以了解如何使用ExtJS 4.1来创建用户界面,包括布局管理、组件系统、数据绑定、事件处理等核心概念。 描述中提到的".直接导入myeclipse即可",意味着这些示例代码是用Eclipse的MyEclipse插件...

    Extjs例子Extjs例子

    Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子

    extjs分割窗体的例子

    使用extjs做的一个分割窗体的例子,入门型的,

    extjs和servlet数据交互的例子

    本文将深入探讨一个使用ExtJS与Servlet进行数据交互的实际例子,这对于初学者理解这两者如何协同工作非常有帮助。 首先,我们来看Servlet的部分。Servlet是Java平台上的一个标准接口,用于扩展服务器的功能,特别是...

    Extjs Extjs4.2.1 例子

    Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp

    ExtJs3.1目前所有例子源代码

    - **Proxy**:Store通过Proxy与数据源交互,支持远程和本地数据操作。 - **Model**:定义数据结构和字段,是Store和View之间的桥梁。 3. **数据网格(Data Grid)** - **GridPanel**:数据网格是显示大量表格...

    ExtJs4本地化

    2. **ExtJS4的本地化支持**:ExtJS4提供了内置的本地化支持,允许开发者轻松地为应用添加多语言功能。这通常通过加载特定的语言包来实现,这些语言包包含了组件的文本资源。 3. **languages.js**:这可能是一个包含...

    Extjs+Kindeditor的例子

    这个例子可能会展示如何创建一个具有完整功能的文本编辑器组件,包括如何在ExtJS应用中加载KindEditor,如何配置编辑器,以及如何处理用户输入的数据。开发者可以从这个例子中学到如何将第三方库集成到自己的ExtJS...

    extJs源代码及例子

    extJs源码以及很多例子,供初学者学习

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    总结来说,`Ext.Panel`和`TreePanel`在EXTJS中是两个关键的组件,它们支持动态加载本地数据,提高了用户体验。理解这两个组件的工作原理和如何利用`Store`、`Ajax`、`TreeStore`进行数据加载,是EXTJS开发中的重要...

    extjs_dwr整合例子

    本压缩包文件"Extjs+Dwr"提供了一个整合ExtJS和DWR的例子,让我们来详细探讨一下这两个技术以及它们的整合过程。 **ExtJS** 是一个JavaScript库,主要用于构建桌面级的Web应用。它提供了一套完整的UI组件,包括数据...

    extjs4登陆小例子

    extjs4是权限 网络分享资料中修改而来。 extjs4+ spring3 + hibernate3.3+ struts2.1.8 + mysql5.04+ xp + myEclipse 8.5 测试通过 。 extjsdemo.rar

    EXTJS 的 MVC 开发例子

    这个例子可以帮助你理解EXTJS MVC的架构,并提供了一个实际操作的基础,你可以根据自己的需求进行改造和扩展。通过学习这个案例,你将学会如何组织代码,如何定义模型和视图,如何编写控制器以响应用户操作,以及...

    Extjs Tree + JSON + Struts2 例子

    在本文中,我们将探讨如何结合 ExtJS、JSON 和 Struts2 实现一个动态加载的树形菜单。ExtJS 是一个流行的 JavaScript 框架,用于...这个例子展示了如何在实际开发中灵活应对数据格式差异,以实现跨技术栈的无缝集成。

Global site tag (gtag.js) - Google Analytics