1. #1
    Sencha User
    Join Date
    May 2013
    Location
    Saint-Petersburg, Russia
    Posts
    36
    Vote Rating
    0
    Answers
    1
    jumpow is on a distinguished road

      0  

    Default Unanswered: Border layout works in Ext.Viewport and does not work in Ext.Panel.... WHY?

    Unanswered: Border layout works in Ext.Viewport and does not work in Ext.Panel.... WHY?


    Next code works
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <link rel='stylesheet' type='text/css' href='extjs/resources/css/ext-all.css'>
    <script type='text/javascript' src='extjs/ext-all-debug.js'></script>

    <script type="text/javascript">
    Ext.application(
    {
    name: 'Alfa IVR Statistic',
    launch: function()
    {
    Ext.BLANK_IMAGE_URL='extjs/resources/s.gif';
    var portal = new Ext.Viewport(
    {
    layout: 'border',
    items:
    [
    {
    title: 'West Region is resizable',
    id: 'JSWest',
    region: 'west', // position for region
    width: 300,
    split: true,
    collapsible: true,
    minSize: 75,
    maxSize: 450,
    layout: 'vbox',
    margins: '0 2 2 2',
    html: 'this is west region'
    },
    {
    title: 'Center Region',
    id: 'JSCenter',
    region: 'center',
    layout: 'vbox',
    margins: '2 2 0 0',
    html: 'this is center region'
    }
    ]
    });
    }
    });
    </script>
    </head>
    <body>
    </body>
    </html>


    If I replace Viewport by Panel, I have empty screen (IE, FireFox)... Why?

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <link rel='stylesheet' type='text/css' href='extjs/resources/css/ext-all.css'>
    <script type='text/javascript' src='extjs/ext-all-debug.js'></script>

    <script type="text/javascript">
    Ext.application(
    {
    name: 'Alfa IVR Statistic',
    launch: function()
    {
    Ext.BLANK_IMAGE_URL='extjs/resources/s.gif';
    var portal = new Ext.Panel(
    {
    renderTo: document.body,
    width: '100%',
    height: '100%',
    layout: 'border',
    items:
    [
    {
    title: 'West Region is resizable',
    id: 'JSWest',
    region: 'west', // position for region
    width: 300,
    split: true,
    collapsible: true,
    minSize: 75,
    maxSize: 450,
    layout: 'vbox',
    margins: '0 2 2 2',
    html: 'this is west region'
    },
    {
    title: 'Center Region',
    id: 'JSCenter',
    region: 'center',
    layout: 'vbox',
    margins: '2 2 0 0',
    html: 'this is center region'
    }
    ]
    });
    }
    });
    </script>
    </head>
    <body>
    <div id="SJPageMenu"></div>
    </body>
    </html>

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,120
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      1  

    Default


    Viewport streches automatcally to the available size. Panels do not, you have to set the width and height in pixel notation. 100% will probably not work.

  3. #3
    Sencha User
    Join Date
    May 2013
    Location
    Saint-Petersburg, Russia
    Posts
    36
    Vote Rating
    0
    Answers
    1
    jumpow is on a distinguished road

      0  

    Default Yes, it works with width:400, height: 400

    Yes, it works with width:400, height: 400


    I changed to
    width: '400px',
    height: '400px',
    and it now show panel.

    But it is rendered to document body
    renderTo: document.body,
    So, it have to fill all browser area... How?

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,120
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    If you want to fit the whole browser it is better to use the viewport, because it calculates the window size for you. Else you have to do it yourself, so why not use the viewport in that case?

    You can set the layout of the viewport to fit and add your panel. I think that´s the best option you have.

    You must see the viewport as your main window.

Thread Participants: 1