Help Required

[yvkumar87]

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

[sword-it]

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 -

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
See here for sample working example - http://jsfiddle.net/maneeshgo/XRNMC/

[yvkumar87]

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

[yvkumar87]

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()
});
});
}

[yvkumar87]

Urgent Help Required to resolve this below post
Please

[yvkumar87]

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

[skirtle]

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:

flex: 1

or a percentage width:

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.

[skirtle]

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.

[jay@moduscreate.com]

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.

[yvkumar87]

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