EXTJS 树拖拽和表格拖拽 plugins

最新推荐文章于 2023-12-05 22:44:46 发布

thankful_chn

最新推荐文章于 2023-12-05 22:44:46 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： extjs 文章标签： extjs 树拖拽表格拖拽 plugins

本文链接：https://blog.youkuaiyun.com/u011385445/article/details/50559929

extjs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在 EXTJS 中利用 TreePanel 的 ptype: 'treeviewdragdrop' 和 Grid 的 ptype: 'gridviewdragdrop' 插件实现拖拽功能。通过这两个插件，可以方便地在树形视图和表格之间进行数据的拖放操作，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、TreePanel ：ptype: ‘treeviewdragdrop’

 var guestBarTree = Ext.create('Ext.tree.Panel', {
       width: 200,
        height: '50%',
        store: guestBarStore,
        displayField: 'dataName',
        rootVisible: true,
        region: 'south',
        enableDD: true,//是否支持拖拽效果
        viewConfig: {
            name: 'barTreeView',
            plugins: {
                ptype: 'treeviewdragdrop',
                ddGroup: 'ddTreeGroup'//自定义，名字相同可组件之间拖动
            },
            allowCopy: true,
            listeners: {
                'beforedrop': dropHandler//落下之前执行函数
            }
        },
        listeners: {
            'itemclick': function (_this, record) {
                mainBarTree.getSelectionModel().deselectAll();
                nodeInfoStore.loadRawData(getNodeInfo(record));
                if (barMenu) {
                    barMenu.hide();
                }
            },
            itemcontextmenu: itemcontextHandler,//鼠标右键
            containerclick: function () {
                if (barMenu) {
                    barMenu.hide();
                }
            }
        }
    });

2、Grid ：ptype：’gridviewdragdrop’

 var tablePanelNorth = Ext.create('Ext.panel.Panel', {
        layout: 'hbox',
        region: 'north',
        border: 0,
        height: 200,
        items: [{
            xtype: 'grid',
            flex: 1,
            height: '100%',
            store: nodeInfoStore,
            viewConfig: {
                name: 'barTreeView',
                plugins: {
                    ptype: 'gridviewdragdrop',
                    ddGroup: 'ddTreeGroup',
                    enableDrag: false
                },
                listeners: {
                    'beforedrop': function (n, data, overModel, dropPosition, dropHandlers) {
                        if (data.view.name == 'barTreeView') {//从主栏或者宾栏拖拽过来的
                            Ext.Msg.alert('提示', '不能拖主宾栏的信息');
                            return false;
                        }
                    }
                }
            },
            listeners: {
                itemclick: function () {
                    nodeInfoMenu.hide();
                },
                itemcontextmenu: function (_this, record, item, index, e) {
                    e.preventDefault();
                    nodeInfoMenu.showAt(e.getPoint());
                },
                containerclick: function () {
                    nodeInfoMenu.hide();
                }
            },
            columns: [{
                text: '类型',
                dataIndex: 'isProperty',
                flex: 0.5,
                renderer: function (data) {
                    if (data) {
                        return '属性信息';
                    }
                    return '基本信息';
                }
            }, {
                text: '数据类型',
                dataIndex: 'dataType',
                flex: 0.5,
                renderer: function (data) {
                }
            }, {
                text: '数据名',
                dataIndex: 'dataName',
                flex: 1
            }, {
                text: '节点属性',
                dataIndex: 'isRealNode',
                flex: 0.5,
                renderer: function (data) {
                }
            }, {
                text: '附加信息',
                flex: 1,
                renderer: function (data, m, record) {
                }
            }],
            tbar: ['<b>节点信息</b>', '->', {
                xtype: 'button',
                text: '保存',
                handler: function () {
                }
            }]
        }, {
            xtype: 'panel',
            flex: 1,
            height: '100%',
            tbar: ['<b>表格信息</b>', '->', {
                xtype: 'button',
                text: '隐藏基本信息',
                handler: function (btn) {
                }
            }]
        }]
    })