Не удается скрыть корневой узел в древовидном представлении [ExtJS]

1

Я получаю JSON из запроса AJAX, который не соответствует структуре, созданной TreeStore. Поэтому я загружаю хранилище с необработанными данными, а затем добавляю данные в 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)...

Изображение 174551

Любая помощь?

Теги:
extjs

1 ответ

0
Лучший ответ

Вместо использования store.add() вам нужно использовать store.setRoot() treestore.

Если вы хотите напрямую добавить в treepanel без использования магазина, вы можете использовать treepanel.setRootNode().

FIDDLE

В этой вышеприведенной скрипте я создал демонстрацию с использованием treepanel и я использовал динамические данные, используя запрос ajax от json. Надеюсь, это поможет/поможет вам достичь вашего требования.

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
                            });
                        }
                    })
                }
            }]
        });
    }
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню