1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    yvkumar87 is on a distinguished road

      0  

    Default Answered: Help Required

    Answered: Help Required


    How to resize the div panel when we minimise the browser..
    I have one horizontal and two vertical panels but when resizing the panels has to get automatically resized and fit into that div content
    How to do it??
    I am new to this can anyone guide me how to do this resize
    My below code is in this format..
    Ext.onReady(function()
    {
    Ext.QuickTips.init();
    Ext.suspendLayouts();
    Ext.resumeLayouts(true);

    Ext.create('Ext.panel.Panel',
    {
    width: screen_width,
    height: screen_height,
    title: 'ABC',
    layout: 'border',
    items: [
    {
    title: 'Filters',
    region: 'north',
    xtype: 'panel',
    height: 85,
    //split: true,
    collapsible: true,
    layout: 'fit',
    items: [
    {
    margins: '5,5,5,5',
    html: '<nobr><input type="button" onclick="validate_form()" value="MN" id="get_report" style="height:30px; width:80px"></nobr>'
    }]
    },
    {
    width: view_window,
    //height: '500',
    title: 'ABC',
    layout: 'fit',
    region: 'center',
    xtype: 'panel',
    items: [
    {
    html: '<br /><div id="ABC"></div>'
    }]
    },
    {
    width: view_window,
    //height: '500',
    title: 'DEF',
    layout: 'fit',
    region: 'east',
    xtype: 'panel',
    items: [
    {
    html: '<br /><div id="DEF"></div>'
    }]
    }],

    renderTo: Ext.getBody()
    });
    Ext.EventManager.onWindowResize(panel.doLayout, panel);
    });
    Attached Images

  2. Hi yvkumar,

    The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing like -

    Code:
    Ext.create('Ext.container.Viewport', {  
        layout: 'border',
        items: [
            {
            title: 'Filters',
            region: 'north',
            xtype: 'panel',
            height: 85,
            //split: true, 
            collapsible: true,
            items: [
                {
                margins: '5,5,5,5',
                html: '<nobr><input type="button" onclick="validate_form()" value="MN" id="get_report" style="height:30px; width:80px"></nobr>'}]},
        {
            title: 'ABC',
            region: 'center',
            xtype: 'panel',
            items: [
                {
                html: '<br /><div id="ABC">horizentol panel</div>'}]},
        {
            title: 'DEF',
            region: 'east',
            xtype: 'panel',
            items: [
                {
                html: '<br /><div id="DEF">East Panel</div>'}]}],
    
        renderTo: Ext.getBody()
    });
    
    


    For more info read API docs -
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.Viewport
    S
    ee here for sample working example - http://jsfiddle.net/maneeshgo/XRNMC/

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    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 Use "Ext.container.Viewport" class

    Use "Ext.container.Viewport" class


    Hi yvkumar,

    The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing like -

    Code:
    Ext.create('Ext.container.Viewport', {  
        layout: 'border',
        items: [
            {
            title: 'Filters',
            region: 'north',
            xtype: 'panel',
            height: 85,
            //split: true, 
            collapsible: true,
            items: [
                {
                margins: '5,5,5,5',
                html: '<nobr><input type="button" onclick="validate_form()" value="MN" id="get_report" style="height:30px; width:80px"></nobr>'}]},
        {
            title: 'ABC',
            region: 'center',
            xtype: 'panel',
            items: [
                {
                html: '<br /><div id="ABC">horizentol panel</div>'}]},
        {
            title: 'DEF',
            region: 'east',
            xtype: 'panel',
            items: [
                {
                html: '<br /><div id="DEF">East Panel</div>'}]}],
    
        renderTo: Ext.getBody()
    });
    
    


    For more info read API docs -
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.Viewport
    S
    ee here for sample working example - http://jsfiddle.net/maneeshgo/XRNMC/
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    yvkumar87 is on a distinguished road

      0  

    Default


    Thanks a lot for ur immediate response to my post..
    I will check with ur solution by changing ito Ext.panel.Panel to Ext.container.Viewport
    I have to check in all browsers with ur changes so that i can reply u back once again if i face any issue with other browsers like IE7/8/9 and Mozilla and Chrome etc..
    Thank U sword-it

  5. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    yvkumar87 is on a distinguished road

      0  

    Default


    Hi
    Need Help in the code changes
    As per ur changes i have modified ur script to below code now i am facing issue like along three div panels i it is getting resized only one left div panel
    it is not affecting with right and upper div panel..
    So my scenario is i am looking for when i resize the browser the height and width has to adjust automatically by giving equal div width and height and above panel also should be resized but this code is doing only for left div resize not for right and upper divs
    In the below attachment after doing as per ur code change i am getting the output like height&width.png
    but i am expecting the ouput like output.png when we resize


    function resize(){
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
    {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
    }
    var screen_width = myWidth;
    var screen_height = myHeight;
    var view_window = screen_width/2;
    chart_height=(screen_height/2)+(screen_height/7);


    Ext.onReady(function()
    {
    Ext.QuickTips.init();
    Ext.suspendLayouts();
    Ext.resumeLayouts(true);


    Ext.create('Ext.container.Viewport',
    {
    width: screen_width,
    height: screen_height,
    title: 'ABC',
    layout: 'border',
    items: [
    {
    title: 'Filters',
    region: 'north',
    xtype: 'panel',
    height: 85,
    //split: true,
    collapsible: true,
    layout: 'fit',
    items: [
    {
    margins: '5,5,5,5',
    html: '<nobr><input type="button" onclick="validate_form()" value="MN" id="get_report" style="height:30px; width:80px"></nobr>'
    }]
    },
    {
    width: view_window,
    //height: '500',
    title: 'ABC',
    layout: 'fit',
    region: 'center',
    xtype: 'panel',
    items: [
    {
    html: '<br /><div id="ABC"></div>'
    }]
    },
    {
    width: view_window,
    //height: '500',
    title: 'DEF',
    layout: 'fit',
    region: 'east',
    xtype: 'panel',
    items: [
    {
    html: '<br /><div id="DEF"></div>'
    }]
    }],


    renderTo: Ext.getBody()
    });
    });
    }
    Attached Images

  6. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    yvkumar87 is on a distinguished road

      0  

    Default


    Urgent Help Required to resolve this below post
    Please

  7. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    yvkumar87 is on a distinguished road

      0  

    Default


    That means you are saying it is not possible to do or anything else Please let me know??

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,590
    Answers
    541
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    See the docs for Border layout:

    http://docs.sencha.com/ext-js/4-1/#!...ntainer.Border

    To have the east region resize automatically use either flex:

    Code:
    flex: 1
    or a percentage width:

    Code:
    width: '50%'
    You don't need to calculate the initial width manually the way you are currently, allow the layout to do that for you.

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,590
    Answers
    541
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Also, a few notes on forum etiquette:
    1. Don't use generic titles like 'Help Required'. Be specific.
    2. Always wrap code in [CODE] tags so we can read it.
    3. Post questions in the Q&A forum, not the general discussion forums.

    Thanks.

  10. #9
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by skirtle View Post
    Also, a few notes on forum etiquette:
    1. Don't use generic titles like 'Help Required'. Be specific.
    2. Always wrap code in [CODE] tags so we can read it.
    3. Post questions in the Q&A forum, not the general discussion forums.

    Thanks.
    +1. I wish more people followed these rules.

  11. #10
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    yvkumar87 is on a distinguished road

      0  

    Default


    Thanks a lot for giving me the solution and appologies for not following forum etiquette next time i will take care of when i am posting the message
    Now i have two issues regarding same type of scenario
    What ever u have suggested me "flex" property it is working fine
    1) Now i am facing the issue with chart_height i.e when i minimise the browser chart_height is not decreasing dynamically
    width is getting dynamically resized but chart i am facing the issue it is not properly getting resized
    Please give me any solution regarding minimising the chart height dynamically when me minimise the browser
    Below code is the modified code as per ur suggestion
    Issue#1 code
    ==============
    function resize(){
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
    {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
    }
    var screen_width = myWidth;
    var screen_height = myHeight;
    var view_window = screen_width/2;
    chart_height=(screen_height/2)+(screen_height/7);




    Ext.onReady(function()
    {
    Ext.QuickTips.init();
    Ext.suspendLayouts();
    Ext.resumeLayouts(true);




    Ext.create('Ext.container.Viewport',
    {
    //width: screen_width,
    //height: screen_height,
    title: 'ABC',
    layout: 'border',
    items: [
    {
    title: 'doit',
    region: 'north',
    xtype: 'panel',
    height: 85,
    //split: true,
    collapsible: true,
    layout: 'fit',
    items: [
    {
    margins: '5,5,5,5',
    html: '<nobr><input type="button" onclick="validate_form()" value="MN" id="get_report" style="height:30px; width:80px"></nobr>'
    }]
    },
    {
    //width: view_window,
    height: '500',
    title: 'ABC',
    layout: 'fit',
    region: 'center',
    xtype: 'panel',
    items: [
    {
    html: '<br /><div id="ABC"></div>'
    }]
    },
    {
    //width: view_window,
    height: '500',
    title: 'DEF',
    layout: 'fit',
    region: 'east',
    xtype: 'panel',
    flex: 1,
    items: [
    {
    html: '<br /><div id="DEF"></div>'
    }]
    }],




    renderTo: Ext.getBody()
    });
    ?
    });
    }


    2) Now i am having four divs which is shown in newinput.png i am looking for to get the ouput.png but i am getting the
    result as wrongoutput.png
    divs are not properly getting resized when i minimise the browser after using "flex :1" property and the chartheight issue same as above explanation
    Attachments are shown for second issue
    Please give me any suggestions how to overcome these issues
    Attached Images