PDA

View Full Version : Scrolling in different browsers



savsw
8 Sep 2010, 9:21 PM
Hello,

When set autoScroll to 'true' in Safari only vertical scrollbar appears.
In some (Firefox) browsers also horizontal scrollbar appears.
It seems the width of vertical scroll itself increases the width of the widget.
Have anybody met the same behaviour?
Can you please recommend anything concerning this problem?

vishalnnsingh
8 Sep 2010, 9:25 PM
This happens on many different conditions.
Please check that the width or height of the container or whatever holds the widget is more than the widget and also the autoscroll for the container is set to true.

lucia_mgv
3 Nov 2010, 6:40 AM
Have you found the solution?? I have the same problem with the horizontal scrollbar. The fact is that I don't want to set a fixed width to the widget countained by the container that i want to scroll.
I have an 'hbox' layout and I don't want to set a fixed width to the different columns. I want the container to scroll when it's neede by the fixed elements that lay in the columns.
How did you implement finally?

Condor
3 Nov 2010, 6:53 AM
This all depends on the layout you are using.

Some layouts will need to be configured to leave room for the scrollbar (even if it is not visible).

lucia_mgv
3 Nov 2010, 7:10 AM
how could I configure the layout?

sorry but i am new in Ext JS...

Condor
3 Nov 2010, 7:15 AM
Post the layout code you are having problems with.

lucia_mgv
3 Nov 2010, 7:41 AM
The code of the diferent columns:


var MiddleLeft=new Ext.Container({
id:'MiddleLeft',
flex:1,
autoHeight:true,
style:'padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;background-color:Green;',
});

var LoginContainer=new Ext.Container({
id:'LoginContainer',
autoWidth:true,
autoHeight:true,
style:'padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;background-color:Green;',
layout:'form',
items:[
new Ext.BoxComponent({
id:'AvantiaLogo',
html:'img',
width:400,
height:76,
style:'text-align:center;font-size:8px;background-color:#00FFFF;margin-bottom:6px;'
}),
new Ext.Container({
id:'DataCNT',
width:400,
autoHeight:true,
style:'margin-bottom:12px;padding-left:60px;padding-right:0px;padding-top:0px;padding-bottom:0px;background-color:Green;',
layout:'form',
items:[
new Ext.BoxComponent({
id:'User',
html:'txt',
anchor:'100%',
height:33,
style:'text-align:center;font-size:8px;background-color:#E6E6FA;margin-bottom:6px;'
}),
new Ext.BoxComponent({
id:'Password',
html:'txt',
anchor:'100%',
height:33,
style:'text-align:center;font-size:8px;background-color:#E6E6FA;'
})
]
}),
new Ext.BoxComponent({
id:'Login',
html:'btt',
width:130,
height:24,
style:'margin-left:auto;text-align:center;font-size:8px;background-color:#00FF00;'
})
]
});

var MiddleRight=new Ext.Container({
id:'MiddleRight',
flex:1,
autoHeight:true,
style:'padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;background-color:Green;',
});
The code with the container. I could scroll the container with layout 'form' or the one with layout 'hbox'. The problem is that if I scroll the 'form' one, I have to fix a minWidth to the 'hbox' container, and that's what I don't want to do.

If I ser autoScroll:true to the container with 'hbox' layout, the scrollbar is not appearing.



var RRRR_LOGINSYSTEM=new Ext.Container({
id:'RRRR_LOGINSYSTEM',
layout:'form',
autoScroll:true,
items:[
new Ext.Container({
style:'padding-left:0px;padding-right:0px;padding-top:150px;padding-bottom:0px;background-color:LightGray;',
layout:'hbox',
items:[MiddleLeft,LoginContainer,MiddleRight]})]
});

function MainFunction()
{

var Viewport=new Ext.Viewport({
id:'Viewport',
layout:'fit',
items:[RRRR_LOGINSYSTEM]
});
}

Ext.onReady(MainFunction);Thanks for your help anyway

Condor
3 Nov 2010, 7:52 AM
1. Your LoginContainer container should width:400 and not autoWidth:true. Then all children can be anchor:'100%' instead of needing to have a width.
Using autoWidth:true is almost always a bad idea!

2. Configure your RRRR_LOGINSYSTEM with:

layoutConfig:{scrollOffset:Ext.getScrollBarWidth()}