Ext4.2学习之表格和树形的结合

最新推荐文章于 2022-06-15 06:21:30 发布

lang20150928

最新推荐文章于 2022-06-15 06:21:30 发布

阅读量173

点赞数

分类专栏： extjs 文章标签： javascript html

本文链接：https://blog.csdn.net/m0_37607945/article/details/115032667

版权

extjs 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

在ext中可以通过扩展使用treecolumn插件的方式实现表格与树形结合的效果。
在这里插入图片描述
加载的11-01.txt数据如下

[{
    task:'EXT程序开发',
    duration:'12个月',
    user:'',
    cls:'master-task',
    iconCls:'task-folder',
    children:[{
        task:'第一章介绍EXT',
        duration:'1个月',
        user:'Lingo',
        leaf:true,
        iconCls:'task'
    },{
        task:'第二章GRID',
        duration:'2个月',
        user:'ForgetDavid',
        leaf:true,
        iconCls:'task'
    },{
        task:'第十一章常用工具',
        duration:'9个月',
        user:'Lingo',
        leaf:true,
        iconCls:'task'
    }]
},{
    task:'协同办公OA',
    duration:'3个月',
    user:'',
    cls:'master-task',
    iconCls:'task-folder',
    children:[{
        task:'平台搭建',
        duration:'1个月',
        user:'Lingo',
        leaf:true,
        iconCls:'task'
    },{
        task:'系统设计',
        duration:'1个月',
        user:'Lingo',
        leaf:true,
        iconCls:'task'
    },{
        task:'编码实现',
        duration:'1个月',
        user:'Lingo',
        leaf:true,
        iconCls:'task'
    }]
}]

效果如下所示，这里使用了cls和iconcls来定义树形节点的样式和图标，使用children为树杈节点设置子节点，使用leaf定义叶子节点
在这里插入图片描述
对应源码

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
    <style type="text/css">
        .task {
            background-image: url(icons/fam/cog.gif) !important;
        }
        .task-folder {
            background-image: url(icons/fam/folder_go.gif) !important;
        }
    </style>
    <script type="text/javascript">
        Ext.Loader.setConfig({
            enabled: true
        });

        // Ext.require([
        //     'Ext.data.*',
        //     'Ext.grid.*',
        //     'Ext.tree.*',
        //     'Ext.ux.CheckColumn'
        // ]);


        Ext.onReady(function(){
            Ext.define('Task', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'task',     type: 'string'},
                    {name: 'user',     type: 'string'},
                    {name: 'duration', type: 'string'}
                ]
            });

            var tree = new Ext.tree.TreePanel({
                width: 550,
                height: 300,
                rootVisible:false,
                autoScroll:true,
                title: '示例',
                renderTo: 'tree',
                collapsible: true,
                useArrows: true,

                columns:[{
                    xtype: 'treecolumn',
                    header:'任务',
                    width:330,
                    dataIndex:'task'
                },{
                    xtype: 'treecolumn',
                    header:'持续时间',
                    width:100,
                    dataIndex:'duration'
                },{
                    xtype: 'treecolumn',
                    header:'负责人',
                    width:100,
                    dataIndex:'user'
                }],
                store: new Ext.data.TreeStore({
                    model: Task,
                    proxy: {
                        type: 'ajax',
                        url: '11-01.txt'
                    },
                    root: {
                        text: '我是根'
                    }
                })
            });

        });
    </script>
</head>
<body>
<div id="tree" style="height:300px;"></div>
</body>
</html>

lang20150928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ext4.2学习之表格和树形的结合

在ext中可以通过扩展使用treecolumn插件的方式实现表格与树形结合的效果。加载的11-01.txt数据如下[{ task:'EXT程序开发', duration:'12个月', user:'', cls:'master-task', iconCls:'task-folder', children:[{ task:'第一章介绍EXT', duration:'1个月', user:'Lingo',
复制链接

扫一扫