PDA

View Full Version : [CLOSED] [CLOSED TOUCH-24] [1.1.0] Docked item add/remove shifts content body around.



jay@moduscreate.com
19 Apr 2011, 12:52 PM
Demo: http://tdg-i.com/img/screencasts/2011-04-19_1651.mp4


Note that i'm not using doComponentLayout because that's actually being called by addDocked and removeDocked.

example code:



Ext.setup({
onReady: function() {

var dockedItems = {
top : {
xtype : 'container',
dock : 'top',
itemId : 'top',
style : 'border-bottom: 1px solid; background-color: #F99;',
height : 30,
html : 'Top dock'
},
left : {
xtype : 'container',
itemId : 'left',
dock : 'left',
width : 50,
style : 'border-right: 1px solid; background-color: #99F;',
html : 'Left dock'
},
bottom : {
xtype : 'container',
dock : 'bottom',
itemId : 'bottom',
style : 'border-top: 1px solid; background-color: #9F9;',
height : 30,
html : 'Bottom dock'
},
right : {
xtype : 'container',
dock : 'right',
itemId : 'right',
width : 50,
style : 'border-left: 1px solid; background-color: #FF9;',
html : 'Right dock'
}
};

var addRemoveDocked = function(dockedItemId) {
var dockedItem = myPanel.getDockedComponent(dockedItemId);

if (! dockedItem) {
myPanel.addDocked(dockedItems[dockedItemId]);
}
else {
myPanel.removeDocked(dockedItem, true)
}

myPanel.doLayout()
};

var panelItems = [
{
text : 'Add/Remove top',
handler : function(btn) {
addRemoveDocked('top')
}
},
{
text : 'Add/Remove bottom',
handler : function(btn) {
addRemoveDocked('bottom')
}
},
{
text : 'Add/Remove left',
handler : function(btn) {
addRemoveDocked('left')
}
},
{
text : 'Add/Remove right',
handler : function(btn) {
addRemoveDocked('right')
}
}
];

var myPanel = new Ext.Panel({
fullscreen : true,
bodyStyle : 'padding: 10px;',
items : panelItems,
defaultType : 'button',
defaults : {
height : 40,
style : 'margin-top: 5px 0 0 0'
},
layout : {
type : 'vbox',
pack : 'center'
}
});
}
});

mitchellsimoens
19 Apr 2011, 4:47 PM
Thank you for your bug report. This has been entered!

korka
24 Nov 2011, 12:19 AM
Right now, i solved by:

In your function addRemoveDocked save current width and height, then add/remove item, then call to doComponentLayout with saved sizes:




var addRemoveDocked = function(dockedItemId) {
var width = myPanel.getSize( ).width;
var height = myPanel.getSize( ).height;

var dockedItem = myPanel.getDockedComponent(dockedItemId);
if (! dockedItem)
{
myPanel.addDocked(dockedItems[dockedItemId]);
}
else
{
myPanel.removeDocked(dockedItem, true);
}

myPanel.doComponentLayout(width,height);
};