PDA

View Full Version : Horizontal scrollbars and content size



MichaelEr
26 Mar 2012, 7:39 AM
Hi,

I implemented two custom components and added them to a panel. All works fine, especially drag and drop and so on but If I get an vertical scroll bar, nothing could be dragged or dropped after 100% of the normal visible (without horizontal scrollbars) panel body. See the following screenshot. The purple part is the padding of the second component. I expected for component 1 and 2 that they both are enlarged to fill the scrolled panel body, but how?

Kind regards
Michael

33149

mitchellsimoens
26 Mar 2012, 8:42 AM
What layout are you using?

MichaelEr
26 Mar 2012, 8:50 AM
Hi,
thanks for your reply. I'm using a border layout. The following is my viewport config. The 'canvas' component is the panel which contains the two components.

Ext.define('Foo.view.Viewport', {
extend : 'Ext.container.Viewport',
requires : ['Foo.view.ProjectOverview'],
layout : 'fit',
items : [{
xtype : 'panel',
dockedItems : [{
dock : 'top',
xtype : 'modelcontrols'
}],
layout : {
type : 'border'
},
items : [{
xtype : 'panel',
id : 'rightContainer',
collapsible : false,
region : 'center',
layout : {
type : 'border'
},
items : [{
xtype : 'canvas',
collapsible : false,
region : 'center'
}, {
title : 'canvasVali',
region : 'south',
xtype : 'vali',
collapsible : true,
collapsed: true,
height : 250
}]
}, {
title : 'Navigator',
region : 'west',
xtype : 'projecttree',
collapsible : true
}]
}]
});

mankz
26 Mar 2012, 10:14 AM
Hmm, quite a bit of border layouts does look correct but seems like it could be simplified.

MichaelEr
26 Mar 2012, 10:40 AM
Hi,
Ok, which parts would you refactor? I thought thats the best solution to get the following layout structure. I just scribbled it with PP to visualize it. The canvas components should also be used and edited if the component does not fit into the displayed screen. The scrollbar works also fine, but the content div does not enlarge to the size of the scrollable view, which kills the DD functionality in the area where I have to scroll to, to edit it. Any ideas?

Kind regards
Michael
33159

MichaelEr
27 Mar 2012, 12:21 AM
Hi,

I tried to fix this behaviour with a very ugly solution.

afterDraw : function() {
var comp1 = Ext.get('comp1');
var canvas = Ext.get('canvas');
var tableWidth = canvas.first().getWidth(); // a table element
var comp2 = Ext.get('comp2').getWidth();
var maxWidth = Math.max(tableWidth, comp2);
comp1.setWidth(maxWidth);
canvas.setWidth(maxWidth);
}

This is very ugly, because if a element of the canvas resizes, the DD is also killed. I also tried to register a 'onresize' listener on the canvas.first() element, and executed the afterDraw function but this crashs the browser. It seems that it also resizes the canvas.first() element which leads to a recursion.

Any ideas?

Kind regards
Michael