1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    16
    Answers
    1
    Vote Rating
    0
    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;'
            }]
        });
    });

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    109
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


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

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

      0  

    Default


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

  5. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    3
    Vote Rating
    0
    haiml is on a distinguished road

      0  

    Default What about minimum width?

    What about minimum width?


    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?

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

      0  

    Default


    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

  7. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    3
    Vote Rating
    0
    haiml is on a distinguished road

      0  

    Default


    Thanks a lot!!

  8. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    3
    Vote Rating
    0
    haiml is on a distinguished road

      0  

    Default


    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.

  9. #8
    Sencha User
    Join Date
    Apr 2013
    Posts
    10
    Vote Rating
    0
    deepakbellale is on a distinguished road

      0  

    Default no scroll when the screen resolution reduces.

    no scroll when the screen resolution reduces.


    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.

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

      0  

    Default


    Haiml, Do you have code for me to try?

  11. #10
    Sencha User
    Join Date
    Apr 2013
    Posts
    10
    Vote Rating
    0
    deepakbellale is on a distinguished road

      0  

    Default Code

    Code


    I have attached my whole code of front page.

    please look into it.
    Attached Files

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar