PDA

View Full Version : Screen Resolution Issue



samarth
22 May 2012, 11:26 PM
Hi folks,
I have developed some web pages using EXTJS 3.4, Pages are viewed properly in desktop but the same page when i opened in a laptop or i connected to the projector it is not rendering properly :((, It is throwing some screen resolution issue. Could anyone help me in this issue. :s

Thanks in advance.

willigogs
23 May 2012, 1:04 AM
I think you will need to provide considerably more detail / information, as it is almost impossible to diagnose from your brief description.

samarth
23 May 2012, 1:14 AM
I think you will need to provide considerably more detail / information, as it is almost impossible to diagnose from your brief description.

Hi willigogs,
Thanks for your quick reply. I am attaching a file image that is my application image file. That page only giving issue when resolution changes or when i connected to a projector. Please help me in this issue. Please check that attachment willigogs. Thanks in advance.

willigogs
23 May 2012, 1:23 AM
Could you provide more information of exactly what's going wrong? How is the site laid out previously, what exactly happens when you use a smaller resolution / projector, are you using a viewport, or is this all manually coded with panels dropped into container divs using renderTo, etc, etc...

samarth
23 May 2012, 1:43 AM
Could you provide more information of exactly what's going wrong? How is the site laid out previously, what exactly happens when you use a smaller resolution / projector, are you using a viewport, or is this all manually coded with panels dropped into container divs using renderTo, etc, etc...

Hi willigogs,

I am using a viewport in view port i have took center region. In that attachment several images are there to design a login page i have used html:'<table></table>' I have designed this login page using tables. In between one form within a window is there. I have moving that window according to the screen width percentage. when i connected to the projector or which ever monitor having more resolution then those images will go somewhere and full UI design will change and looks very bad in high resolution and also in projectors. I am facing this issue from several days. I was fed up with this issue. Please help me in this issue.:(( Thanks in advance

willigogs
23 May 2012, 1:50 AM
If you are using a viewport, then any resizing should automatically be taken care of, with all child panels adjusting their width and height on any browser resize event.

e.g:
http://dev.sencha.com/deploy/ext-3.4.0/examples/layout-browser/layout-browser.html

Run the same test of connecting to a projector when viewing that page, and let us know if you experience the same problem.

samarth
23 May 2012, 1:56 AM
If you are using a viewport, then any resizing should automatically be taken care of, with all child panels adjusting their width and height on any browser resize event.

e.g:
http://dev.sencha.com/deploy/ext-3.4.0/examples/layout-browser/layout-browser.html

Run the same test of connecting to a projector when viewing that page, and let us know if you experience the same problem.

Hi willigogs,
I have called a form inside a window. I have used x: and y: to move that window in the screen. That movement is according to the screen.width and screen.height in the percentage basis. this window will go away when i connected to the other resolution. Please help me in this issue. Is is possible to call that window inside that <td></td> tag? so that it will fit into that space and no other movements will be there know so.

Thanks in advance.

willigogs
23 May 2012, 4:48 AM
Try adding "constrain: true" to your window.

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Window-cfg-constrain

samarth
23 May 2012, 4:53 AM
Try adding "constrain: true" to your window.

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Window-cfg-constrain

Hi willigogs,
Then what is the use of "constrainHeader:true," in window component?? Can i remove that component by replacing constrain: true???
Thanks for your quick reply. Thanks in advance

willigogs
23 May 2012, 4:55 AM
Replace "constrainHeader" with "constrain" :)

samarth
23 May 2012, 4:59 AM
Replace "constrainHeader" with "constrain" :)

Hi willigogs,
Thanks for your reply i will change now and test that. It may work i guess..

samarth
23 May 2012, 5:03 AM
Replace "constrainHeader" with "constrain" :)

Hi willigogs,
It works fine. but when i am re-sizing my browser and made it maximize then that window will change the position and it won't come back to the previous position without refreshing? How to come back to previous position without refreshing when i maximized my browser???? Please help in this issue.

Thanks in advance.

willigogs
23 May 2012, 5:07 AM
You must have additional code controlling the X and Y position of the window on resize, since maximising / restoring your browser should have no impact on the window position (unless the browser window is so small that it tries to constrain the window).

samarth
23 May 2012, 5:28 AM
You must have additional code controlling the X and Y position of the window on resize, since maximising / restoring your browser should have no impact on the window position (unless the browser window is so small that it tries to constrain the window).

Hi willigogs,
Thanks for your reply. Can you please specify which additional core control have to use???

willigogs
23 May 2012, 6:07 AM
I wasn't suggesting any core controls should be used - I was instead saying you must have already written and implemented some code which changes the position of this EXT window when the browser window / viewport is resized - since this is not a normal behaviour.

samarth
23 May 2012, 7:56 PM
I wasn't suggesting any core controls should be used - I was instead saying you must have already written and implemented some code which changes the position of this EXT window when the browser window / viewport is resized - since this is not a normal behaviour.

Hi willigogs,



//this is for x and y co-ordinate to move window
var browserWidth=(screen.width*(12.7/100));
var browserHeight=(screen.height*(24/100));


var win = new Ext.Window({
closable : false,
renderTo:Ext.getBody(),
id:'Logwindow',
//constrainHeader:true,
border:false,
layout:'anchor',
anchor:'100% 100%',
floating: true,
x: browserWidth,
y: browserHeight,
resizable:false,
height:windowScreenHeight,
width:windowScreenWidth,
shim:false,
frame:false,
shadow:false,
draggable:false,
constrain:true,
items:loginForm //form in which login form is there
});
win.show();


In this i have used two variables browserWidth and browserHeight to move window. It is working my pc and some other pc which is having common resolution. When i see in other pc with big screen width having more than common resolution or connected to a projector then this window won't fit in the proper way. Can any one help me in this issue.

Thanks in advance.

willigogs
24 May 2012, 5:40 AM
I would suggest removing / re-writing that logic, as it is that specific code which is giving you the issues...

samarth
24 May 2012, 7:46 PM
I would suggest removing / re-writing that logic, as it is that specific code which is giving you the issues...

Hi willigogs,
Then how to over come this resolution problem by moving window in the screen to our specific location???

willigogs
25 May 2012, 2:12 AM
Then how to over come this resolution problem by moving window in the screen to our specific location???
As I said, I would suggest re-writing it so it works on all resolutions - as it seems clear that it only works on a very specific screen size. This really shouldn't be very complicated, but I obviously can't help you with that, since I don't know the requirements of where exactly this window needs to appear...

samarth
25 May 2012, 2:23 AM
As I said, I would suggest re-writing it so it works on all resolutions - as it seems clear that it only works on a very specific screen size. This really shouldn't be very complicated, but I obviously can't help you with that, since I don't know the requirements of where exactly this window needs to appear...

Hi willigogs,
I have attached a image in that all are images i have built in html table tag <table>. In the left side of the screen window is needed i tried a lot but resolution is giving trouble. Please help me in this issue. In this thread only code is there know that code only i have used to move window but it is giving trouble in less resolution or more resolution or if i connected in a projector

Thanks in advance

samarth
25 May 2012, 2:24 AM
As I said, I would suggest re-writing it so it works on all resolutions - as it seems clear that it only works on a very specific screen size. This really shouldn't be very complicated, but I obviously can't help you with that, since I don't know the requirements of where exactly this window needs to appear...

Hi willigogs, You may got the requirement i guess

willigogs
25 May 2012, 2:30 AM
As already answered in one of your previous threads, I would suggest using anchorTo, as this should meet your requirements perfectly:

http://www.sencha.com/forum/showthread.php?198574-Need-to-move-window-according-to-screen-resolution&p=789584&viewfull=1#post789584

samarth
25 May 2012, 2:37 AM
As already answered in one of your previous threads, I would suggest using anchorTo, as this should meet your requirements perfectly:

http://www.sencha.com/forum/showthread.php?198574-Need-to-move-window-according-to-screen-resolution&p=789584&viewfull=1#post789584

Hi willigogs,

Ext.getCmp('Loginwindow').anchorTo(document, 'c-c', [225,-5]);

Is this in a correct form???

willigogs
25 May 2012, 2:41 AM
Yes, but if you are wanting to align it to the bottom left corner, then you wouldn't use the centering logic. See:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Element-method-alignTo
(http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Element-method-alignTo)
e.g:


Ext.getCmp('Loginwindow').anchorTo(document, 'bl-bl', [50,-50])


This code anchors the window's bottom left corner to the bottom left corner of the document, but then moves it 50 pixels left, and 50 pixels up.

samarth
25 May 2012, 3:43 AM
Yes, but if you are wanting to align it to the bottom left corner, then you wouldn't use the centering logic. See:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Element-method-alignTo
(http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Element-method-alignTo)
e.g:


Ext.getCmp('Loginwindow').anchorTo(document, 'bl-bl', [50,-50])


This code anchors the window's bottom left corner to the bottom left corner of the document, but then moves it 50 pixels left, and 50 pixels up.

Hi willigogs,
Thank you its working well. But when i changing the size of the screen it is moving how to fit that window. It shouldn't move at all like that type?

Thanks in advance

willigogs
25 May 2012, 4:24 AM
Sorry, but I don't understand.

Can you clarify?

samarth
25 May 2012, 4:33 AM
Sorry, but I don't understand.

Can you clarify?

Hi willigogs,



Ext.getCmp('Loginwindow').anchorTo(document, 'l-l', [175,-35]);


This is working well when i change my screen size then that window will move upside then after maximize that window it will come in proper way. My wish is that window shouldn't move it must be in that position only.

Thanks in advance.

willigogs
25 May 2012, 4:36 AM
Sorry, still not understanding the issue :(

samarth
25 May 2012, 4:40 AM
Sorry, still not understanding the issue :(

when i restore the browser then that window will change position know means it will go upside. When it restore down then it will comes to the previous position. can that window to be fixed in that Ext.getCmp('Logwindow').anchorTo(document, 'l-l', [175,-35]); in this position only???

willigogs
25 May 2012, 4:42 AM
If you're wanting to place a window in an absolute position, why not just set the position of it based on the top/left or x/y coordinates?

e.g:


Ext.getCmp('Loginwindow').setPosition(175,100)

or:


Ext.getCmp('Loginwindow').setPagePosition(175,100)


To be honest, from looking at your provided image, I'm not even sure why you're using a window for this? Why not just have a normal panel built into the actual layout, rather than having a window on a separate layer above the page, since you obviously want this positioned relatively to the page contents?

samarth
25 May 2012, 4:59 AM
If you're wanting to place a window in an absolute position, why not just set the position of it based on the top/left or x/y coordinates?

e.g:


Ext.getCmp('Loginwindow').setPosition(175,100)

or:


Ext.getCmp('Loginwindow').setPagePosition(175,100)


To be honest, from looking at your provided image, I'm not even sure why you're using a window for this? Why not just have a normal panel built into the actual layout, rather than having a window on a separate layer above the page, since you obviously want this positioned relatively to the page contents?

some one has developed so urgency have to design like this so i am struggling