ExtJS-UI组件-TreePanel

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587500.html

更新记录
2023年1月2日 从笔记迁移到博客。

Ext.tree.Panel

实例：基本使用#

//Start by defining an Ext.data.TreeStore to load our data into: 
let store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'treeData.json'
    },
    root: {
        text: 'Countries',
        expanded: true
    }
});

//测试使用的从后端加载的treeData.json内容
[
    {
        "text": "United Kindom",
        "leaf": false
        "children": [
            {
                "text": "Glasgow",
                "leaf": true
            },
            {
                "text": "Edinburgh",
                "leaf": true
            },
            {
                "text": "London",
                "leaf": true
            }
        ]
    },
    {
        "text": "France",
        "leaf": true
    }
]

//Create the Tree Panel and render it to the document's body. 
Ext.create('Ext.tree.Panel', {
    title: 'Countries & Cities',
    width: 500,
    height: 300,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody(),
    style: 'margin: 50px'
});

实例：排序#

在treestore中创建sorters配置项即可

var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'treeData.json'
    },
    root: {
        text: 'Countries',
        expanded: true
    },
    //排序器
    sorters: [
        {
            property: 'text',
            direction: 'ASC' //for descending change to 'DESC'
        }
    ]
});

实例：复杂排序#

使用Complex and custom sorting
sorterFn配置项即可

var nameLengthSorter = function(objectOne, objectTwo){
    var objectOneLength = objectOne.get('text').length,
        objectTwoLength= objectTwo.get('text').length;

    if(objectOneLength=== objectTwoLength){
        return 0;
    } else if(objectOne
        Length<objectTwoLength){
        return -1;
    } else {
        return 1;
    }
};

//然后
sorters: [
    {
        sorterFn: nameLengthSorter,
        direction: 'ASC' //for descending change to 'DESC'
    }
]

实例：对多个字段排序#

sorters: [
    {
        property: 'text',
        direction: 'ASC'
    },
    {
        property: 'continent',
        direction: 'DESC'
    }
]

实例：后期排序#

调用store的sort方法即可

store.sort('text');
//or we can force a direction like so:
store.sort('text', 'DESC');

实例：树之间拖拽节点#

Dragging-and-dropping nodes within a tree
enableDrop: true sets the tree to accept drop gestures
enableDrag: false stops the users from dragging nodes within from this TreeView
allowContainerDrop: true allows the user to drop anywhere in the tree's container

//树1：
plugins: {
    ptype: 'treeviewdragdrop'
}
//树2：
plugins: {
    ptype: 'treeviewdragdrop',
    enableDrop: true,
    enableDrag: false,
    allowContainerDrop: true
}