ExtJS 数据处理-TreeStore类型

更新记录
2022年7月18日 发布。
2022年7月6日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

Ext.data.TreeStore（树型数据存储）

说明

Ext.data.TreeStore类继承自Ext.data.Store
常用于与tree组件一起使用
注意：用于Ext.data.TreeStore类的model必须继承自Ext.data.TreeModels

实例：定义TreeStore

//定义TreeModel
Ext.define('PandaApp.model.NavigationItem', {
    extend: 'Ext.data.TreeModel',  //继承自TreeModel
    fields: [   //定义字段
        {
            name: 'Label',
            type: 'string'
        },
        {
            name: 'Route',
            type: 'string'
        }
    ]
});

//定义TreeStore
Ext.define('PandaApp.store.Navigation', {
    extend: 'Ext.data.TreeStore',
    model: 'PandaApp.model.NavigationItem'
});

实例：实例化TreeStore

//定义TreeModel
Ext.define('PandaApp.model.NavigationItem', {
    extend: 'Ext.data.TreeModel',  //继承自TreeModel
    fields: [   //定义字段
        {
            name: 'Label',
            type: 'string'
        },
        {
            name: 'Route',
            type: 'string'
        }
    ]
});

//定义TreeStore
Ext.define('PandaApp.store.Navigation', {
    extend: 'Ext.data.TreeStore',
    model: 'PandaApp.model.NavigationItem'
});

实例：设置根节点

//定义TreeModel
Ext.define('PandaApp.model.NavigationItem', {
    extend: 'Ext.data.TreeModel',  //继承自TreeModel
    fields: [   //定义字段
        {
            name: 'Label',
            type: 'string'
        },
        {
            name: 'Route',
            type: 'string'
        }
    ]
});

//定义TreeStore
Ext.define('PandaApp.store.Navigation', {
    extend: 'Ext.data.TreeStore',
    model: 'PandaApp.model.NavigationItem'
});

//实例化TreeStore
var navigationStore = Ext.create('PandaApp.store.Navigation');

//设置TreeStore根节点
navigationStore.setRoot({
    Label : 'Root',
    children: [
        {
            Label: 'Home',
            Route: '/home'
        },
        {
            Label : 'Users',
            Route : '',
            children: [
                {
                    Label: 'Manage Users',
                    Route: '/manage-users',
                    leaf : true
                },
                {
                    Label: 'Add User',
                    Route: '/add-user',
                    leaf : true
                }
            ]
        }
    ]
});

实例：添加数据到TreeStore

//定义TreeModel
Ext.define('PandaApp.model.NavigationItem', {
    extend: 'Ext.data.TreeModel',  //继承自TreeModel
    fields: [   //定义字段
        {
            name: 'Label',
            type: 'string'
        },
        {
            name: 'Route',
            type: 'string'
        }
    ]
});

//定义TreeStore
Ext.define('PandaApp.store.Navigation', {
    extend: 'Ext.data.TreeStore',
    model: 'PandaApp.model.NavigationItem'
});

//实例化TreeStore
var navigationStore = Ext.create('PandaApp.store.Navigation');

//设置TreeStore根节点
navigationStore.setRoot({
    Label : 'Root',
    children: [
        {
            Label: 'Home',
            Route: '/home'
        },
        {
            Label : 'Users',
            Route : '',
            children: [
                {
                    Label: 'Manage Users',
                    Route: '/manage-users',
                    leaf : true
                },
                {
                    Label: 'Add User',
                    Route: '/add-user',
                    leaf : true
                }
            ]
        }
    ]
});

//添加子节点
navigationStore.getRoot().appendChild({
    Label: 'Orders',
    Route: '/orders'
});

//插入子节点
navigationStore.getRoot().insertChild(0,{
    Label: 'First',
    Route: '/first'
});

//查找节点
navigationStore.getRoot().findChild('Label', 'Users', true).appendChild({
    Label: 'Import Users',
    Route: '/import-users'
});