Extjs入坑

Ext Js第一次用这个东西，就被拉去做一个管理模块，这个模块刚好要用到树形结构，还好项目本身有例子可以参考，不然就要疯了。基础的就不说了，比如extjs中的类的定义，创建和基本的机构。

Ext.tree.Panel

extjs中的树组件是通过这个类来表达，先不说怎么构建，先看看这个类有那些常用的配置

配置选项

root，用来配置根节点和树的结构不配置也可以默认使用children来作为子节点属性名

 root: {
                    expanded: true,
                    children: [
                        {text: 'detention', leaf: true},
                        {
                            text: 'homework', expanded: true, children: [
                                {text: 'book report', leaf: true},
                                {text: 'algebra', leaf: true}
                            ]
                        },
                        {text: 'buy lottery tickets', leaf: true}
                    ]
                }

 

text的值是会显示在树上的，expanded用来控制是否展开子节点。leaf表示该节点是否为子节点，children是子节点集合。

最终这棵树会显示成这样

rootVisible

用来控制树节点是否可见，如果可见就会想上面 一样有一个Root节点

 Ext.data.TreeStore

store是用来加载数据的类，不可能所有的树都是写死的，是需要加载的。store是有一个Ext.data.Model来定义它的数据模型，当然也可以不定义这个类，直接使用fields这个属性来制定对应的字段，Store会自动去构建这个模型。看一个例子

me.store = Ext.create('Ext.data.TreeStore',
            {
                fields: [{
                    name: 'id',
                    mapping: 'deptId'
                }, 'deptId', 'code', 'fullName', 'shortName', 'level', 'status', 'date', 'pid',
                    {
                        name: 'icon', defaultValue: 'images/icons/group.png'
                    }],
                proxy: {
                    type: 'ajax',
                    async: false,
                    url: 'departmentManage/getDepartmentTree.action',
                    reader: {
                        type: 'json'
                    }
                },
                autoLoad: true
            }
        );

proxy是来加载数据到store中的一个类。type用来指定类型，用的比较多的是ajax，async用来指定是否异步加载。url表示请求的路径，reader是用来读取proxy加载到的数据。加载的数据格式是一般是个嵌套结构（也可以有其他结构我知道的就是这个。。。。。）

｛
text:'name'
children:[
{
text:'name',
children:[.....]
}
]
｝

转载于:https://www.cnblogs.com/zshjava/p/11250481.html