如何在主面板中拖动面板 [英] How to drag panels in main Panel
问题描述
如何允许拖放在主面板中放置面板？
我有一个面板包含一个面板（暂时）或一些面板，我想允许拖放组织面板。
喜欢这个例子： http://examples.extjs.eu/freedrag.html
但我不明白如何适应我的应用程序。
How to allow drag & drop panels in a main panel ? I have a panel which contains one panel ( for the moment ) or somes panels and i want allow drag and drop for organize panels. like this examples : http://examples.extjs.eu/freedrag.html but i don't understand how to adapte this with my application .
我的代码：
（粘滞物品是tabobj tab.Panel然后我想要拖放）
My code : ( Is the Sticky items into tabobj tab.Panel then i want drag & drop )
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.Action',
'Ext.tab.*',
'Ext.button.*',
'Ext.form.*',
'Ext.layout.*'
]);
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
Ext.define('Mesclasses.objet.sticky', {
alias: ['widget.stick'],
extend: 'Ext.panel.Panel',
bodyStyle: {
background: 'yellow',
},
height: 150,
width: 150,
margin: '10 0 0 10',
draggable: true,
items: [{
xtype: 'label',
text: 'Title',
listeners: {
move: function (me, x, y, opt) {
alert('move');
}
}
}],
});
var item2 = Ext.create('Ext.Panel', {
title: 'Accordion Item 2',
html: '<empty panel>',
cls: 'empty'
});
var item3 = Ext.create('Ext.Panel', {
title: 'Accordion Item 3',
html: '<empty panel>',
cls: 'empty'
});
var item4 = Ext.create('Ext.Panel', {
title: 'Accordion Item 4',
html: '<empty panel>',
cls: 'empty'
});
var item5 = Ext.create('Ext.Panel', {
title: 'Accordion Item 5',
html: '<empty panel>',
cls: 'empty'
});
var accordion = Ext.create('Ext.Panel', {
region: 'west',
margins: '5 0 5 5',
split: true,
width: 210,
layout: 'accordion',
items: [item2, item3, item4, item5]
});
var paneltitle = Ext.create('Ext.panel.Panel', {
region: 'north',
html: '<h1 class="x-panel-header" id="title">Your Sticky World</h1>',
height: 40
});
var montab = Ext.create('Ext.tab.Tab', {
title: 'lol',
});
var tabobj = Ext.create('Ext.tab.Panel', {
region: 'center',
//xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: [{
title: 'My Stickys',
xtype: 'panel',
items: [{
xtype: 'stick',
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
renderTo: Ext.getBody(),
items: [
paneltitle,
accordion, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
},
tabobj]
});
});
推荐答案
查看来源可以帮助。
主要思想是，一般来说，创建 Ext.dd.DDProxy for您正在拖动的每个面板。
所以，以下代码段可以帮助您获得基本功能：
The main idea is, generally, to create Ext.dd.DDProxy for each panel you are dragging. So, the following snippet could help you get the basic functionality working:
{
title: 'My Stickys',
xtype: 'panel',
items : [{
xtype : 'stick',
listeners : {
afterrender : function(stick){
stick.dd = new Ext.dd.DDProxy(stick.el.dom.id, 'group');
}
}
}]
}
或者，为了更通用（检查afterrender监听器）：
Or, to be more generic (check the afterrender listener):
Ext.define('Mesclasses.objet.sticky',{
alias : ['widget.stick'],
extend : 'Ext.panel.Panel',
bodyStyle: {
background: 'yellow',
},
height : 150,
width : 150,
margin : '10 0 0 10',
draggable : true,
items: [{
xtype: 'label',
text : 'Title',
listeners : {
move : function(me,x,y,opt){
alert('move');
}
}
}],
listeners : {
afterrender : function(stick){
stick.dd = new Ext.dd.DDProxy(stick.el.dom.id, 'group');
}
}
});
以下是您最感兴趣的渲染部分（使用ExtJS 3的原始页面）：
Here is the render part you are mostly interested in (original page using ExtJS 3 though):
// runs after the window is rendered
,afterRender:function() {
// create items using template
Ext.Window.prototype.afterRender.apply(this, arguments);
this.tpl.overwrite(this.body, this);
// setup D&D
var items = this.body.select('div.draggable');
// loop through draggable items
items.each(function(el, ce, index) {
// create DDProxy
el.dd = new Ext.dd.DDProxy(el.dom.id, 'group');
// configure the proxy
Ext.apply(el.dd, {
win:this
,itemIndex:index
// runs on drag start
// create nice proxy and constrain it to body
,startDrag:function(x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());
dragEl.applyStyles({border:'','z-index':this.win.lastZIndex + 1});
dragEl.update(el.dom.innerHTML);
dragEl.addClass(el.dom.className + ' dd-proxy');
this.constrainTo(this.win.body);
} // eo function startDrag
// runs on drag end
// save new position of item and fire itemdrag event to save state
,afterDrag:function() {
var el = Ext.get(this.getEl());
var div = this.win.divs[this.itemIndex];
div.x = el.getLeft(true);
div.y = el.getTop(true);
this.win.fireEvent('itemdrag', this);
} // eo function afterDrag
}) // eo apply
}, this); // eo each
} // eo function afterRender
这篇关于如何在主面板中拖动面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
