Sencha TreeGrid 서버 통신 샘플

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

const store = Ext.create('Ext.data.TreeStore', {
    fields: ['id', 'name', 'location'],
    root: {
        expanded: true,
        children: [
            {
                id: 1,
                name: '거실',
                location: '',
                expanded: true,
                children: [
                    { id: 11, name: 'Jane Doe', location: 'jane.doe@example.com', leaf: true },
                    { id: 12, name: 'Mark Doe', location: 'mark.doe@example.com', leaf: true }
                ]
            },
            { id: 2, name: '안방', location: '', leaf: true },
            { id: 3, name: '작은방1', location: '', leaf: true },
            { id: 4, name: '작은방2', location: '', leaf: true }
        ]
    }
});

Ext.define('Home.view.data.Location', {
    extend: 'Ext.form.Panel',
    xtype: 'Data',
    closable: true,
    layout: 'fit',
    items: [
        {
            xtype: 'treepanel',
            title: '위치',
            store: store,
            rootVisible: false,
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 2
            },
            columns: [
                { text: 'ID', dataIndex: 'id', width: 50 },
                {
                    xtype: 'treecolumn',
                    text: '이름',
                    dataIndex: 'name',
                    flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                },
                {
                    text: '위치',
                    dataIndex: 'location',
                    flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                }
            ],
            tbar: {
                xtype: 'toolbar',
                layout: { type: 'hbox', pack: 'end' },
                items: [
                    {
                        text: '추가',
                        handler: function () {
                            const treePanel = this.up('treepanel');
                            const selection = treePanel.getSelectionModel().getSelection();
                            if (!selection.length > 0) {
                                Ext.Msg.alert('Error', '선택된 row가 없습니다');
                                return;
                            }

                            const parentNode = selection[0];
                            if (parentNode.isLeaf()) {
                                parentNode.set('leaf', false);
                                parentNode.set('expanded', true);
                            }
                            parentNode.appendChild({
                                id: Math.floor(Math.random() * 100000),
                                name: 'New User',
                                location: '',
                                leaf: true
                            });
                        }
                    },
                    {
                        text: '삭제',
                        handler: function () {
                            const treePanel = this.up('treepanel');
                            const selection = treePanel.getSelectionModel().getSelection();
                            if (!selection.length > 0) {
                                Ext.Msg.alert('Error', '선택된 row가 없습니다');
                                return;
                            }

                            const selectedNode = selection[0];
                            if (selectedNode.hasChildNodes()) {
                                Ext.Msg.alert('Error', '하위 row가 있으면 삭제할 수 없습니다!');
                                return;
                            }

                            selectedNode.remove();
                        }
                    },
                    {
                        text: '저장',
                        handler: function () {
                            const treeData = [];
                            const collectData = function (node) {
                                const data = node.getData();
                                if (node.hasChildNodes()) {
                                    data.children = [];
                                    node.eachChild(child => data.children.push(collectData(child)));
                                }
                                return data;
                            };

                            store.getRoot().eachChild(node => treeData.push(collectData(node)));
                            console.log('Tree Data:', treeData);
                            Ext.Msg.alert('Save', `Saved Tree Data:\n${JSON.stringify(treeData, null, 4)}`);
                        }
                    }
                ]
            },
            selModel: {
                type: 'rowmodel'
            }
        }
    ]
});

'Javascript > Sencha' 카테고리의 다른 글

Sencha TreePanel 사용시 주의사항  (0) 2024.12.01
Sencha Uncaught Error: [Ext.create]  (0) 2024.12.01
Sencha Grid 샘플  (0) 2024.12.01
Sencha TreeGrid 샘플  (0) 2024.12.01
Sencha Grid store에 변경사항 확인 및 저장하기  (0) 2024.12.01