EXTJS 树拖拽和表格拖拽 plugins

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();
}
}
}
});

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