Threaded View

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    16
    Vote Rating
    0
    Answers
    1
    corneadoug is on a distinguished road

      0  

    Default Answered: Extjs - Browser window resizing, no scroll bar

    Answered: Extjs - Browser window resizing, no scroll bar


    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



  2. 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;'
            }]
        });
    });