PDA

View Full Version : screen resolution and size agnostic development of sencha application



ng_varun
8 Feb 2014, 5:12 AM
Hi ExtJS Genious,

What are the guidelines or best practice for creating extjs application screen size and resolution agnostic? Also my application users are accessing my application on ipad through browserand they have complain about usability.

Please guide me what is the right way to get it right for any browser IE8+ Firefox2+ Chrome and Safari and most importantly screen size and resolution responsive.

Appreciate your guidance on the same.

Thanks,
Varun Singh

scottmartin
11 Feb 2014, 1:35 PM
This would all depend on your requires for each layout. It would be difficult to provide a blank answer except to say that you could develop for the lowest resolution and anything larger would stretch to size.

The other alternative to check for the device and create an alternative screen for lower resolutions.

ng_varun
11 Feb 2014, 1:58 PM
I have seen a typical problem with extjs grid, its height doesn't adjust as per height of screen. If i don't specify height of grid, data of grid disappears. Am i doing this something wrong. Ext JS grid is quite complex in terms of container, In order to support various feature of inner cell, grouping etc. Its very difficult to manage height and width of grid based on screen. I am not sure, if i am able to explain the problem but i will try to upload the sample code to demonstrate my problem.
But i liked the advice of developing application for lower resolution, unfortunately i have build it for higher resolution and now 30% user are using low resolution screen.
May be second solution will work for me. How i can detect of screen resolution and do i need to develop different stylesheet or screen for each resolution?

scottmartin
11 Feb 2014, 2:16 PM
On your grid, it depends on your layout of your parent container. You can set to fit, then it will grow as the container does. You would set your columns to flex: 1 so they grow as your grid does.

Perhaps you can put together a small example of your grid setup:
https://fiddle.sencha.com/#home

If you are using a viewport, it sizes to the screen automatically. Or you can track the size of the div:
Ext.EventManager.onWindowResize(grid.doLayout,grid); // rendered to div

You can check the navigator.userAgent for a device check.