PDA

View Full Version : Draggable Panels



gijukud6
26 Sep 2012, 2:07 PM
Hi,

so basically i would like to drag around and resize the 2 panels (window_1, window_2) freely inside the bottom panel. But when i drag one window lower than the bottomborder of the other window, it partly disappears. When i resize the windows, they autoallign to the left. Does anyone know, how to avoid this? Thanks!


Ext.application({
name: 'advanced-search-cui',
launch: function() {

Ext.create('Ext.panel.Panel',

{
xtype: 'panel',
itemId: 'window_main',
title: 'window_main',
width: 1000,
height: 700,
layout: {type: 'vbox'},
items: [
{
xtype: 'panel',
itemId: 'box_1',
width: 999,
height: 150,
layout: {
type: 'hbox',
padding: 0
},
items: [],
renderTo: Ext.getBody()

},
{
xtype: 'panel',
itemId: 'box_2',
width: 999,
height: 550,
layout: {type: 'hbox'},
items:[{
xtype: 'panel',
itemId: 'window_1',
title: 'Wetter',
width: 200,
height: 200,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
layout: {type: 'vbox'},
items: [],
renderTo: Ext.getBody()
},
{
xtype: 'panel',
itemId: 'window_2',
title: 'Kalender',
width: 200,
height: 200,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
layout:{type: 'vbox'},
items:[],
renderTo: Ext.getBody()
}],
renderTo: Ext.getBody()}],
renderTo: Ext.getBody()}
)
}
});

vietits
26 Sep 2012, 3:19 PM
1. You should use 'absolute' layout for container that contains window_1 and window_2.
2. You should not use renderTo for components that are children of a container. It should only be applied for topmost components.


Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
itemId: 'window_main',
title: 'window_main',
width: 1000,
height: 700,
layout: {type: 'vbox'},
items: [{
xtype: 'panel',
itemId: 'box_1',
width: 999,
height: 150,
layout: {
type: 'hbox',
padding: 0
},
items: [],
// renderTo: Ext.getBody()
}, {
xtype: 'panel',
itemId: 'box_2',
width: 999,
height: 550,
layout: {type: 'absolute'},
items: [{
xtype: 'panel',
itemId: 'window_1',
title: 'Wetter',
width: 200,
height: 200,
margin: '10 0 0 10',
resizable: true,
draggable: true,
closable:true,
layout: {type: 'vbox'},
items: [],
// renderTo: Ext.getBody()
}, {
xtype: 'panel',
itemId: 'window_2',
title: 'Kalender',
width: 200,
height: 200,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
layout:{type: 'vbox'},
items:[],
// renderTo: Ext.getBody()
}],
// renderTo: Ext.getBody()
}],
renderTo: Ext.getBody()}
);
});

a.premkumar
26 Sep 2012, 10:45 PM
Along with the suggestions of vietits, I would like to suggest you one more thing. Try setting

autoScroll:true,
in your base panel. It might help with the panel disappearance issue.

gijukud6
27 Sep 2012, 4:56 AM
thanks, vietits code worked for me.
Maybe you can help me again...
I added a tabpanel. On clickevent of the tabs, it shall show window_1 resp. window_2 which are hidden at first.
What did I do wrong?



Ext.application({
name: 'advanced-search-cui',
launch: function() {

Ext.create('Ext.panel.Panel',

{
xtype: 'panel',
itemId: 'window_main',
title: 'window_main',
width: 1000,
height: 700,
layout: {type: 'vbox'},
items: [
{
xtype: 'panel',
itemId: 'box_1',
width: 999,
height: 25,
layout: {
type: 'hbox',
padding: 0
},
items:[
{
xtype: 'tabpanel',
itemId: 'toolbar',
title: '',
width: 1000,
height: 25,
renderTo: document.body,
items: [{title: 'Wetter',
handler: function(){

var target = Ext.ComponentQuery.query('#window_1')[0];
target.show();
}
},
{title: 'Kalender',
handler: function(){

var target = Ext.ComponentQuery.query('#window_2')[0];
target.show();
}
}
]
},
],


},
{
xtype: 'panel',
itemId: 'box_2',
width: 999,
height: 550,
layout: {type: 'absolute'},
items:[{
xtype: 'panel',
itemId: 'window_1',
title: 'Wetter',
width: 200,
height: 200,
hidden: true,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
closeAction:'hide',
layout: {type: 'vbox'},
items: [],

},
{
xtype: 'panel',
itemId: 'window_2',
title: 'Kalender',
width: 200,
height: 200,
hidden: true,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
closeAction:'hide',
layout:{type: 'vbox'},
items:[],

}],
}],
renderTo: Ext.getBody()}
)
}
});

vietits
27 Sep 2012, 5:32 PM
Below is my suggestion to fix your problem. I wonder why you use tabpanel to play the role of toolbar? Why don't you use toolbar instead?


Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
itemId: 'window_main',
title: 'window_main',
width: 1000,
height: 700,
layout: {type: 'vbox'},
items: [{
xtype: 'panel',
itemId: 'box_1',
width: 999,
height: 25,
layout: {
type: 'hbox',
padding: 0
},
items:[{
xtype: 'tabpanel',
itemId: 'toolbar',
title: '',
width: 1000,
height: 25,
//renderTo: document.body, <- do not use renderTo for children inside a container
items: [{
title: 'Wetter',
tabConfig: {
handler: function(){
var target = Ext.ComponentQuery.query('#window_1')[0];
target.show();
}
}
},{
title: 'Kalender',
tabConfig: {
handler: function(){
var target = Ext.ComponentQuery.query('#window_2')[0];
target.show();
}
}
}]
}],
}, {
xtype: 'panel',
itemId: 'box_2',
width: 999,
height: 550,
layout: {type: 'absolute'},
items:[{
xtype: 'panel',
itemId: 'window_1',
title: 'Wetter',
width: 200,
height: 200,
hidden: true,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
closeAction:'hide',
layout: {type: 'vbox'},
items: [],
},{
xtype: 'panel',
itemId: 'window_2',
title: 'Kalender',
width: 200,
height: 200,
hidden: true,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
closeAction:'hide',
layout:{type: 'vbox'},
items:[],
}],
}],
renderTo: Ext.getBody()
});
});

gijukud6
28 Sep 2012, 4:01 AM
Thanks it worked. I was just testing with tabpanels.