Sencha treepanel drag&drop 적용

Ext.application({
    name: 'TreeMultiplePluginsApp',
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'treepanel',
                    title: 'TreePanel with Multiple Plugins',
                    rootVisible: false,
                    store: Ext.create('Ext.data.TreeStore', {
                        root: {
                            expanded: true,
                            children: [
                                {
                                    text: 'Node 1',
                                    leaf: false,
                                    children: [
                                        { text: 'Child Node 1', leaf: true },
                                        { text: 'Child Node 2', leaf: true }
                                    ]
                                },
                                {
                                    text: 'Node 2',
                                    leaf: false,
                                    children: [
                                        { text: 'Child Node 3', leaf: true },
                                        { text: 'Child Node 4', leaf: true }
                                    ]
                                }
                            ]
                        }
                    }),
                    viewConfig: {
                        plugins: [
                            {
                                ptype: 'treeviewdragdrop', // Enable drag-and-drop
                                dragText: 'Drag and drop to reorganize'
                            },
                            {
                                ptype: 'gridviewresizer', // Enable column resizing
                            }
                        ]
                    },
                    columns: [
                        {
                            xtype: 'treecolumn',
                            text: 'Name',
                            dataIndex: 'text',
                            flex: 1
                        },
                        {
                            text: 'Info',
                            dataIndex: 'info',
                            flex: 1
                        }
                    ],
                    listeners: {
                        drop: function (node, data, overModel, dropPosition) {
                            Ext.Msg.alert(
                                'Node Dropped',
                                `You moved ${data.records[0].get('text')} to ${overModel.get('text')} (${dropPosition}).`
                            );
                        }
                    }
                }
            ]
        });
    }
});

셀 에디팅 plugins과는 별개임

Ext.application({
    name: 'TreeMultiplePluginsApp',
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'treepanel',
                    title: 'TreePanel with Multiple Plugins',
                    rootVisible: false,
                    store: Ext.create('Ext.data.TreeStore', {
                        root: {
                            expanded: true,
                            children: [
                                {
                                    text: 'Node 1',
                                    leaf: false,
                                    children: [
                                        { text: 'Child Node 1', leaf: true },
                                        { text: 'Child Node 2', leaf: true }
                                    ]
                                },
                                {
                                    text: 'Node 2',
                                    leaf: false,
                                    children: [
                                        { text: 'Child Node 3', leaf: true },
                                        { text: 'Child Node 4', leaf: true }
                                    ]
                                }
                            ]
                        }
                    }),
                    viewConfig: {
                        plugins: [
                            {
                                ptype: 'treeviewdragdrop', // Enable drag-and-drop
                                dragText: 'Drag and drop to reorganize'
                            },
                            {
                                ptype: 'gridviewresizer', // Enable column resizing
                            }
                        ]
                    },
                    plugins: {
                        ptype: 'cellediting',
                        clicksToEdit: 2,
                    },
                    columns: [
                        {
                            xtype: 'treecolumn',
                            text: 'Name',
                            dataIndex: 'text',
                            flex: 1
                        },
                        {
                            text: 'Info',
                            dataIndex: 'info',
                            flex: 1
                        }
                    ],
                    listeners: {
                        drop: function (node, data, overModel, dropPosition) {
                            Ext.Msg.alert(
                                'Node Dropped',
                                `You moved ${data.records[0].get('text')} to ${overModel.get('text')} (${dropPosition}).`
                            );
                        }
                    }
                }
            ]
        });
    }
});