ext 4.0 学习笔记（2）Tree Grid

最新推荐文章于 2021-03-19 13:41:14 发布

li988761048007

最新推荐文章于 2021-03-19 13:41:14 发布

阅读量2.4k

点赞数 1

文章标签： tree ext user firefox safari chrome

本文链接：https://blog.csdn.net/li988761048007/article/details/6828836

版权

今天学习的是：Array Grid，效果如下：

字体大小扭扭曲曲，是IE8自身的问题，google浏览器显示正常

HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>
            TreeGrid Example
        </title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <!--<script type="text/javascript" src="../../bootstrap.js"></script>-->
        <script src="../../ext-all.js" type="text/javascript"></script>
        <script type="text/javascript" src="treegrid.js"></script>
        <style type="text/css">
            .task {
                background-image: url(../shared/icons/fam/cog.gif) !important;
            }
            .task-folder {
                background-image: url(../shared/icons/fam/folder_go.gif) !important;
            }
        </style>
    </head>
    <body>
        <div id="tree-example"></div>
    </body>
</html>

注意编码方式使用gb2312

讲解代码前，首先先讲解一些类之间的关系（以后会抽出专门的一次笔记来讲述EXT对象之间的关系），

Ext.data.Model 数据模型类

Ext.data.TreeStore树形的数据源

Ext.tree.Panel树形结构的数据板块

Ext.tree.Panel是一个树形结构的数据板块，需要获取store作为数据源，所以需要定义一个Ext.data.Store作为数据源，但是这里需要使用到树形结构，所以我们需要使用Ext.data.Store的子类Ext.data.TreeStore，而Ext.data.TreeStore也仅仅是一种数据源，如果没有按照Ext.tree.Panel能够识别的方式进行构造，Ext.tree.Panel便无法识别数据源，所以在获取Ext.data.TreeStore时，需要按照Ext.data.Model进行规律性的填充。而Ext.data.Model要和Ext.tree.Panel的数据格式相互一致。

用类比的方式讲解可能会更清晰一些， Ext.tree.Panel比作一张表，Ext.data.Model则是一句insert SQL语句，而Ext.data.TreeStore是原始的，散列的数据。

这样相信能很清晰的看清楚其中的关系吧？

下面贴出带注释的代码：

tree.js

//引用需要包含的类
Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*'
]);

Ext.onReady(function() {
    //we want to setup a model and store instead of using dataUrl
    //译文：我们打算安装一个数据模型和数据源来取代dataUrl

    //定义一个名为Task的Ext.data.Model类，是一种模型结构，有三列，分别是task、user、duration
    Ext.define('Task', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'task',     type: 'string'},
            {name: 'user',     type: 'string'},
            { name: 'duration', type: 'string' }
        ]
    });

    //创建一个树形结构的数据源，并按照Task的模型进行填充
    var store = Ext.create('Ext.data.TreeStore', {
        //填充的数据模型对象
        model: 'Task',
        //数据访问对象
        proxy: {
            //填充方式
            type: 'ajax',
            //the store will get the content from the .json file
            //译文：数据源将会从.json文件中获取数据
            //获取数据源的相对路径，这里就体现出jsp中servlet的优势所在了，直接填写拦截路径就OK
            url: 'treegrid.json'
        },
        folderSort: true
    });

    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
    //译文：Ext.ux.tree.TreeGrid不是一个较长的Ux，你可以简单地使用一个tree.TreePanel
    var tree = Ext.create('Ext.tree.Panel', {
        title: '树形结构标题',
        width: 500,
        height: 300,
        //这里指定HTML标签body里面填充这个Ext.tree.Panel
        //renderTo: Ext.getBody(),
        //这里指定HTML标签使用了ID为tree-example填充这个Ext.tree.Panel
        renderTo: 'tree-example',
        //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
        collapsible: true,
        //是否使用vista默认的树形结构箭头
        useArrows: true,
        //是否隐藏根节点，默认为true（？？？）
        rootVisible: false,
        //数据源
        store: store,
        multiSelect: true,
        //是否仅有一个节点能同时被展开
        singleExpand: true,
        //the 'columns' property is now 'headers'
        columns: [{
            xtype: 'treecolumn', //this is so we know which column will show the tree
            text: '文档结构',
            flex: 2,
            sortable: true,
            dataIndex: 'task'
        },{
            //we must use the templateheader component so we can use a custom tpl
            xtype: 'templatecolumn',
            text: '持续时间',
            flex: 1,
            sortable: true,
            dataIndex: 'duration',
            align: 'center',
            //add in the custom tpl for the rows
            tpl: Ext.create('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');
                    }
                }
            })
        },{
            text: '分配至',
            flex: 1,
            dataIndex: 'user',
            sortable: true
        }]
    });
});

tree.json

{"text":".","children": [
    {
        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-folder',
            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
            }]
        }]
    }
]}