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!!

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

Just tried it, and if I try to shorten the width, I get both a vertical and an horizontal scroll bars for no reason (I should get only horizontal scroll bar).

Any suggestion on how to fix that?

Still thanks a lot, it's a big progress since I didn't want to use CSS to set the width&height.

**deepakbellale** · 2 May 2013 12:48 AM

where should i put this code?

Ext.getBody().setStyle('overflow', 'auto');

My code is:

Ext.define('MyApp.view.MasterPage', {
extend : 'Ext.container.Viewport',

layout : {
type : 'border'
},

initComponent : function() {
Ext.getBody().setStyle('overflow', 'auto');
var me = this;

Ext.applyIf(me, {
items : [{
xtype : 'panel',
region : 'west',
itemId : 'menuId',

width : 135,

Code is generated by Sencha Architect.

Please help I'm new to sencha.

My Requirement is when the resolution of the screen is reduces automatically scroll has to come.

**corneadoug** · 2 May 2013 12:54 AM

Haiml, Do you have code for me to try?

**deepakbellale** · 2 May 2013 1:30 AM

I have attached my whole code of front page.

please look into it.

Extjs - Browser window resizing, no scroll bar

Thread Tools

Search Thread

Display

Answered: Extjs - Browser window resizing, no scroll bar

Answered: Extjs - Browser window resizing, no scroll bar

What about minimum width?

What about minimum width?

no scroll when the screen resolution reduces.

no scroll when the screen resolution reduces.

Code

Code

Tags for this Thread