FIDDLE

Question

我从一个不符合TreeStore强制执行的结构的AJAX请求中获取JSON。这就是为什么我用原始数据加载商店，然后我将所述数据添加到TreeStore中。就像这样：

onLoad: function(p1, p2, p3, p4) {
var store = Ext.getStore('areasCentersTreeId');

    if (store) {
        var modifiedStore = parseServerTree(p2[0].data);
        debugger;
        function parseServerTree(data) {
            var nodes = Object.keys(data);
            var treeStoreData = []
            // Cogemos uno a uno y creamos la raiz
            nodes.forEach(rootNodeName => {
                if (rootNodeName != 'id') {

                    var rootNode = {
                        id: rootNodeName,
                        text: rootNodeName,
                        expanded: true,
                        checked: false,
                        children: []
                    }

                    const childrens = data[rootNodeName];
                    //text, leaf, check, id, name, channel, type
                    childrens.forEach(rootNodeChild => {
                        rootNode.children.push({
                            text: rootNodeChild.name,
                            leaf: true,
                            checked: false,
                            id: rootNodeChild.id,
                            channel: rootNodeChild.channel,
                            type: rootNodeChild.type
                        })
                    })
                    treeStoreData.push(rootNode);
                }
            })

            return {children: treeStoreData};
        }
        store.removeAll();
        store.add(modifiedStore);

    }
}

这些是我正在使用的商店：

    areasCentersRaw: {
        parentIdProperty: 'children',
        storeId: 'areasCentersRawId',
        proxy: {
            type: 'ajax',
            url: [REDACTED]
            reader: {
                type: 'json',
            }
        },
        autoLoad: true,
        listeners: {
            load: 'onLoad'
        }
    },

    areasCentersTree: {
        type: 'tree',
        storeId: 'areasCentersTreeId',
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                rootProperty: 'children'
            }
        },
        sorters: [{
            property: 'leaf',
            direction: 'ASC'
        }, {
            property: 'text',
            direction: 'ASC'
        }],
        autoLoad: true
    }

观点：

Ext.define('jsclient.view.assignCapacity.AssignCapacityAreasCentersTreeV', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.assignCapacityAreasCentersTree',
    itemId: 'assignCapacityAreasCentersTreeView',
    requires: [
        'jsclient.view.assignCapacity.AssignCapacityVM',
        'jsclient.view.assignCapacity.AssignCapacityVC'
    ],
    viewModel: 'assignCapacity',
    controller: 'assignCapacity',
    width: 300,
    height: 500,
    checkPropagation: 'both',
    scrollable: true,
     bind: {
         store: '{areasCentersTree}'
     },
    rootVisible: false,
    useArrows: true,
    frame: false,
    hideHeaders: true,
    bufferedRenderer: false,
    queryMode: 'local',
    dataIndex: 'text',
    scope: this,
    animate: true,
})

这会在组件视图中导致一些问题：我无法展开或折叠节点，我无法隐藏根节点（即使我使用rootVisible: false）...

任何帮助？

Answer 1

您需要使用store.add()的store.setRoot()方法，而不是使用treestore。

如果您想直接添加到treepanel而不使用商店，那么您可以使用treepanel.setRootNode()。

FIDDLE

在上面这个小提琴中，我使用treepanel创建了演示，并且我使用来自json的ajax请求使用了动态数据。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create('Ext.data.TreeStore', {
            storeId: 'treestore'
        });

        Ext.create('Ext.tree.Panel', {
            renderTo: Ext.getBody(),
            title: 'Demo Tree',
            store: 'treestore',
            rootVisible: false,

            tbar: ['->', {
                text: 'Load Data',
                handler: function (btn) {
                    var store = btn.up('treepanel').getStore();

                    Ext.Ajax.request({
                        url: 'data1.json',
                        success: function (res) {
                            res = Ext.decode(res.responseText);
                            let data = res.data.map(o => {
                                return {
                                    text: o.orgName,
                                    expanded: true,
                                    children: o.dept.map(v => {
                                        return {
                                            text: v.deptName,
                                            leaf: true
                                        }
                                    })
                                }
                            });
                            store.setRoot({
                                expanded: true, //Need to be set true otherwise it will not shwo if root is hide
                                children: data
                            });
                        }
                    })
                }
            }]
        });
    }
});

无法在树视图中隐藏根节点[ExtJS]

1 个答案:

FIDDLE