1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    25
    Vote Rating
    1
    koolfreak is on a distinguished road

      1  

    Default Viewport fix width and height

    Viewport fix width and height


    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.

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    may you provide code or screenshoots for better understanding the problem
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    25
    Vote Rating
    1
    koolfreak is on a distinguished road

      0  

    Default


    Hi sword-it,

    Code:
    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

  4. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    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

    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    25
    Vote Rating
    1
    koolfreak is on a distinguished road

      0  

    Default


    Hi sword-it,

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

    cheers.
    thanks a lot.

  6. #6
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    From my side its working ,try following code:-

    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
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    25
    Vote Rating
    1
    koolfreak is on a distinguished road

      0  

    Default


    Hi sword-it,

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

    cheers.

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    25
    Vote Rating
    1
    koolfreak is on a distinguished road

      0  

    Default


    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.
    Attached Images

  9. #9
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    447
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    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.

  10. #10
    Sencha User
    Join Date
    Mar 2012
    Posts
    25
    Vote Rating
    1
    koolfreak is on a distinguished road

      0  

    Default


    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.