EXTJS 树拖拽和表格拖拽 plugins

来源：互联网发布：淘宝怎么卖游戏币编辑：程序博客网时间：2024/06/04 03:57

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

0 0