Extjs - Browser window resizing, no scroll bar

**corneadoug** · 7 Oct 2012 9:58 PM

Hi,

I am trying to make something I consider really simple and that can be represented like that in HTML:

<body style="margin: 0 auto;padding: 0;">
<div id="content" style="width: 900px;height: 450px;margin: auto;padding: 0;background-color:blue;">
</div>
</body>

I want to make a fixed size container, and after doing it and centering it with css, I realized that once the browser window size is smaller that the container, no scroll bars appear....

My code:

Ext.application({
requires: ['Ext.container.Viewport'],
name: 'ScrollMe',

appFolder: 'app',

controllers: [
'Main'
],

launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
xtype: 'mainview'
}
],
style: 'background-color: blue;'
});
}
});

and

Ext.define('ScrollMe.view.main.MainView', {
extend: 'Ext.container.Container',
alias: 'widget.mainview',

layout: {
type: 'vbox'
},
width: 1024,
height: 768,
style: 'background-color:red;margin:0 auto;'
});

Or even more simplified:

Ext.require('Ext.container.Viewport');
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
xtype : 'container',
layout: {
type: 'vbox'
},
width: 600,
height: 200,
style: 'background-color:blue;'
}
]
});
}
});

I tried adding some autoScroll: true or minWidth, minHeight but didn't work...
Somebody know how to do something like that?

Thanks

vietits

Try this:

Code:

Ext.onReady(function(){
    Ext.getBody().setStyle('overflow', 'auto');
    Ext.create('Ext.container.Viewport', {
        items: [{
            xtype : 'container',
            layout: {
                type: 'vbox'
            },
            width: 600,
            height: 200,
            style: 'background-color:blue;'
        }]
    });
});

**vietits** · 8 Oct 2012 12:03 AM

Try this:

Code:

Ext.onReady(function(){
    Ext.getBody().setStyle('overflow', 'auto');
    Ext.create('Ext.container.Viewport', {
        items: [{
            xtype : 'container',
            layout: {
                type: 'vbox'
            },
            width: 600,
            height: 200,
            style: 'background-color:blue;'
        }]
    });
});

**corneadoug** · 8 Oct 2012 12:33 AM

Wow, awesome!
Too bad Viewport doesn't support autoScroll: true, which is supposed to do exactly the same.

**haiml** · 28 Nov 2012 4:40 AM

Hi,
What if I want to have minimum width for the box?

Now the box has width of 600, but what if for example I want the box to have width of 100% of the page, but if the page's width is less than 600 then I'll have the scroll bar. Is that possible?

**corneadoug** · 28 Nov 2012 11:54 PM

Well, that's exactly the same, you just need a good layout, this is what I have (working exactly like the one you want):

content = Ext.create('Ext.container.Container', {
region : 'center',
layout : 'fit',
items: [
xtype: 'container',
layout : {type : 'vbox', align : 'stretch'},
// autoScroll:true,
items: [ Whatever you want]
]
});

viewPort = Ext.create('Ext.container.Viewport', {
layout : 'border',
minWidth: 800,
minHeight: 600,
id: 'DaViewPort',
autoScroll: true,
items: [content]
});

Of course don't forget the 'overflow: auto' on the body

**haiml** · 29 Nov 2012 12:19 AM

Thanks a lot!!

Extjs - Browser window resizing, no scroll bar

Thread Tools

Search Thread

Display

Hybrid View

Answered: Extjs - Browser window resizing, no scroll bar

Answered: Extjs - Browser window resizing, no scroll bar

What about minimum width?

What about minimum width?

Tags for this Thread