PDA

View Full Version : Help Required



yvkumar87
26 Sep 2012, 2:28 AM
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
26 Sep 2012, 3:17 AM
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
S (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.Viewport)ee here for sample working example - http://jsfiddle.net/maneeshgo/XRNMC/

yvkumar87
26 Sep 2012, 7:38 AM
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
26 Sep 2012, 8:31 PM
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
27 Sep 2012, 6:22 PM
Urgent Help Required to resolve this below post
Please

yvkumar87
29 Sep 2012, 4:32 AM
That means you are saying it is not possible to do or anything else Please let me know??

skirtle
30 Sep 2012, 4:42 AM
See the docs for Border layout:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.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
30 Sep 2012, 4:45 AM
Also, a few notes on forum etiquette:


Don't use generic titles like 'Help Required'. Be specific.
Always wrap code in [CODE] tags so we can read it.
Post questions in the Q&A forum, not the general discussion forums.


Thanks.

jay@moduscreate.com
30 Sep 2012, 2:49 PM
Also, a few notes on forum etiquette:


Don't use generic titles like 'Help Required'. Be specific.
Always wrap code in [CODE] tags so we can read it.
Post questions in the Q&A forum, not the general discussion forums.


Thanks.

+1. I wish more people followed these rules.

yvkumar87
1 Oct 2012, 6:21 PM
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

skirtle
2 Oct 2012, 2:09 AM
Even in your latest post, you still haven't wrapped your code in [CODE] tags. It's completely unreadable. Preview your posts before you post them to make sure they're correct. Even after you've made a post it's possible to go back and edit it if you make a mistake.

In the code you've posted you don't seem to use use chart_height anywhere, nor is it clear which region is supposed to be the chart.

I recommend taking a look at the layout demos here:

http://www.sencha.com/products/extjs/examples/

In particular, the Layout Browser, Border Layout, HBox and VBox demos. You should also read the relevant sections of the docs. You shouldn't usually need to derive widths and heights manually using innerWidth, clientWidth, etc. If you correctly configure your layouts you should find it does all of that for you.

What is your motivation behind using a Border layout? Do you need collapsible or user-resizable regions? Without knowing what your overall sizing objectives are its a little difficult to judge the correct way to do this.