Viewport fix width and height

[koolfreak]

Hi,

I have a current layout using Viewport and I have added regions on viewport everything works well. But when I resize(minimize) the browser, some contents fall-out to their position. As I search, Viewport will always occupy browser view so scrollbars will not show up. Now I want this scrollbars to show so that I have a fixed layout.

Is there a way to convert my typical Viewport layout to a Fixed layout? without a much coding needed? because I have already layout/arrange my components in the viewport.

cheers.
thanks a lot.

[sword-it]

Hi,

may you provide code or screenshoots for better understanding the problem

[koolfreak]

Hi sword-it,

Ext.require(['*']);
Ext.onReady(function() {
    var cw;
    var topMenuHeight = 90;
    
    if(Ext.isGecko ||  Ext.isGecko2 || Ext.isGecko3){
        topMenuHeight = 80;
    }
    if( Ext.isIE  ){
        topMenuHeight = 90;
    }
    if( Ext.isChrome ){
        topMenuHeight = 86;
    }
    
    cw = Ext.create('Ext.Viewport', {
        layout: {
            type: 'border',
            padding: 2
            
        },
        defaults: {
            split: true
        },
        
        items: [{
            region: 'north',
            split: false,
            height: 61,
            html: '<div id="estarMainHederNorth"></div>'
        },{
            region: 'west',
            
            collapsible: false,
            title: '<img width="20" height="18" style="vertical-align:middle;" src="images/images-design/icon-directory.png">Directory',
            split: true,
            width: 200,
        autoScroll:true,
            html: '<p ><p id="estarReport" /><p id="estarFavorites"/><p id="browser"></p><br/></p>'
        },{
            region: 'center',
            layout: 'border',
            border: false,
            width: 1080,
            items: [{
                region: 'center',
                autoScroll:true,
                title: '<img width="20" height="18" style="vertical-align:middle;" src="images/images-design/icon-folder.png">&nbsp;Folder Contents',
                html: '<p id="statLoader"></p><table id="table-style-main-grid-main" class="table-style-main-grid-main" >'+
                    '<tbody id="testTableData"></tbody></table>',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{xtype: 'panel', id: 'topMenu',border:false,bodyStyle:{'background-color': '#FFF'},width:'100%',height: topMenuHeight,autoScroll: false}]
                }]
            },{
                region: 'north',
                height: 150,
                split: true,
                autoScroll:true,
                title: '<img width="20" height="18" style="vertical-align:middle;" src="images/images-design/icon-folder.png"/>&nbsp;Folder',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{xtype: 'panel', id: 'breadcrumbs',border:false,width:'100%',height:30,autoScroll: true}]
                }]
              }]
        }]
    });
    
    
    
    
});

attached is the sample screenshot. notice the some header icons were gone when squeeze.

cheers.
thanks a lot.

issue-1.PNGissue-2.PNG

[sword-it]

Hi,

i am wondering which framework are you using? ExtJS3.X or ExtJs 4.X ?

i guess you are using 3.4
in Extjs 3.4 , there is no dockedItems , replace it with tbar

check this more detailed info:-
http://docs.sencha.com/ext-js/3-4/#!...Panel-cfg-tbar

[koolfreak]

Hi sword-it,

upon running Ext.getVersion() -> result is => version "4.0.0"

cheers.
thanks a lot.

[sword-it]

Hi,

From my side its working ,try following code:-

Ext.onReady(function () {
    var cw;
    var topMenuHeight = 90;


    if (Ext.isGecko || Ext.isGecko2 || Ext.isGecko3) {
        topMenuHeight = 80;
    }
    if (Ext.isIE) {
        topMenuHeight = 90;
    }
    if (Ext.isChrome) {
        topMenuHeight = 86;
    }


    view = new Ext.Viewport({
        layout: 'border',
        defaults: {
            split: true
        },


        items: [{
            region: 'north',
            split: false,
            height: 61,
            html: '<div id="estarMainHederNorth"></div>'
        }, {
            region: 'west',


            collapsible: false,
            title: '<img width="20" height="18" style="vertical-align:middle;" src="images/images-design/icon-directory.png">Directory',
            split: true,
            width: 200,
            autoScroll: true,
            html: '<p ><p id="estarReport" /><p id="estarFavorites"/><p id="browser"></p><br/></p>'
        }, {
            region: 'center',
            layout: 'border',
            items: [{
                region: 'center',
                title: '<img width="20" height="18" style="vertical-align:middle;" src="images/images-design/icon-folder.png">&nbsp;Folder Contents',
                html: '<p id="statLoader"></p><table id="table-style-main-grid-main" class="table-style-main-grid-main" >' +
                    '<tbody id="testTableData"></tbody></table>',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{ xtype: 'panel', id: 'topMenu', border: false, bodyStyle: { 'background-color': '#FFF' }, width: 100, height: topMenuHeight, autoScroll: false,title:'SubFolder'}]
                }]
            }, {
                region: 'north',
                height: 150,
                split: true,
                autoScroll: true,
                title: '<img width="20" height="18" style="vertical-align:middle;" src="images/images-design/icon-folder.png"/>&nbsp;Folder',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{ xtype: 'panel', id: 'breadcrumbs', border: false, width: 100, height: 30, autoScroll: true, title: 'Panel one' },
                    { xtype: 'panel', id: 'breadcrumb', border: false, width: 100, height: 30, autoScroll: true, title: 'Panel two'}]
                }]
            }]
        }]
    });
});

Output:-
view.png

[koolfreak]

Hi sword-it,

Will try your code and get feedback to you asap. I'm fixing other stuff now.

cheers.

[koolfreak]

Hi sword-it,

I have try your example and there is no scroll bar when resize. The problem that I am solving is that,I want to have a scroll bar when resize. please see attached screenshot.

cheers.
thanks a lot.

[suzuki1100nz]

Hi koolfreak,

You shouldn't need scrolls on the viewport with border layout. If you've set it up right changing the browser window size should cause the layout manager to deal with it.
I wouldn't have the center region as a border layout, change it to vbox.
Nesting border layouts is not ideal.

[koolfreak]

Hi PM suzuki1100nz,

thanks for your advise. btw, can you help me to re-code my existing layout so that it has fix size and has scrollbar when resize?

cheers.
thanks a lot.