Sencha TreePanel 사용시 주의사항

2024. 12. 1. 21:17Javascript/Sencha

store에 autoload:true를 설정하면 client에서 설정한 데이터값이 무시됨

빼거나 false로 설정해야 함

Ext.onReady(function () {
    // Define the TreeStore with static local data
    const store = Ext.create('Ext.data.TreeStore', {
        fields: ['id', 'name', 'location'], // Define the fields for the nodes
        root: {
            expanded: true, // Expand the root node by default
            text: 'Root Node', // Root node's text
            id: 'root', // Root node's ID
            children: [
                {
                    text: 'Child Node 1', // First child node
                    id: 'child1',
                    name: 'Node 1',
                    location: 'Location 1',
                    leaf: true // Indicates this node has no children
                },
                {
                    text: 'Child Node 2', // Second child node
                    id: 'child2',
                    name: 'Node 2',
                    location: 'Location 2',
                    leaf: false, // This node has children
                    children: [
                        {
                            text: 'Grandchild Node 1', // Grandchild node
                            id: 'grandchild1',
                            name: 'Grandchild Node 1',
                            location: 'Location 1-1',
                            leaf: true // Indicates this node has no children
                        }
                    ]
                }
            ]
        },
        autoload: false,
    });

    // Create the TreePanel and link it to the store
    Ext.create('Ext.tree.Panel', {
        title: 'Tree Panel with Local Store',
        width: 400,
        height: 300,
        renderTo: Ext.getBody(),
        store: store, // Attach the TreeStore
        rootVisible: true // Show the root node
    });
});