PDA

View Full Version : Ext.ux.Portal - right columns moves left, when the left one is empty



jack83
26 Oct 2012, 4:03 AM
To begin with, I would like to say hello to everyone here:) I have worked with extjs just for a few days.

I've got a problem with my ext js Portal component, which is defined as follows:



cockpitPanel = new Ext.ux.Portal({
id: 'cockpit',
renderTo: 'cockpitDiv',
title: '<spring:message javaScriptEscape="true" code="cockpit.pageTitle"/>',
tools: [{
id: 'print',
handler: function(){
doPrint();
}
},{
id: 'gear',
handler: function(){
showSelectionPanel();
}
},{
id: 'point',
handler: function(){
collapseSwap();
}
}],
width: '100%',
autoHeight: true,
items:[
{
columnWidth:.5,
id: 'pos1',
items: [{id: 'removeMe1', xtype: 'portlet'}]
},
{
columnWidth:.5,
id: 'pos2',
items: [{id: 'removeMe2', xtype: 'portlet'}]
}], listeners: {
drop : function(e) {
Ext.Ajax.request({
url: '<c:url value="/webkg/cockpit.html"/>',
params:{
json: true,
action: 'save',
panelsPositions: createPositionInMatrix(e.portal)
}
});
}
}


I have two columns, which are populated later on, when the user marks a checkbox on the popup dialog. There are two dummy items, in each column one, which are set invisible later.

The problem looks as follows. Let's say there are 3 portlets in my portal. One on the left, two on the right. Now, when I remove the portlet from the left column, two portlets from the right column are moved to left side, as if they were anchored somehow to the left side. I cannot simply find any attribute or a property of Ext.ux.Portal which is responsible for such a behavior. I would like simply that the right column does not move left, when the left column has no visible items.

I have already analyzed the portal application from http://dev.sencha.com/deploy/ext-3.4.0/examples/portal/portal.html This problem does not occur here, but I still do not know how to achieve it my code. :-?

I would be grateful for any help :)

jack83
28 Oct 2012, 11:01 PM
After many attempts I have finally solved the problem. In contrast to the portal example from sencha I didn't have any paddings in my columns. After I defined the padding of both columns, the right one does not overlap the left one when it is empty. Simple solution but a lot of effort to discover the reason.

The definition of columns looks now as follows:



items:[
{
columnWidth:.5,
style:'padding:6px 3px 0px 6px',
id: 'pos1'
},
{
columnWidth:.5,
style:'padding:6px 6px 0px 3px',
id: 'pos2'
}