Working with ExtJS apps, we often get advice from the senior programmers that we should use ViewPort instead of Panel.
So, the question that we arise is when to use a ViewPort and when to use a Panel. Or, why to use ViewPort if Panel suffice the need.
Well, ViewPort is particularly useful in case you are looking to create a single web page application.
I think designers of ExtJS have put together all the essential components very nicely which allows you to develop Single Page WebApp quite elegantly.
Using viewport you can utilize availbale height and width of browser. You can use screen.availWidth and screen.availHeight to give you component proper dimension.
When I tried to do a little bit of search on google and forms, couple of interesting points came out which can help understanding answer when and why:
The below forum links might useful to further reading:
So, the question that we arise is when to use a ViewPort and when to use a Panel. Or, why to use ViewPort if Panel suffice the need.
Well, ViewPort is particularly useful in case you are looking to create a single web page application.
I think designers of ExtJS have put together all the essential components very nicely which allows you to develop Single Page WebApp quite elegantly.
Using viewport you can utilize availbale height and width of browser. You can use screen.availWidth and screen.availHeight to give you component proper dimension.
When I tried to do a little bit of search on google and forms, couple of interesting points came out which can help understanding answer when and why:
- There may be only one ViewPort for a page for obvious reason that it is specialized container which give you the entire view area of browser. But of course you can use a layout like border layout and add Panels as child component.So, in case you have a
- And, in cases where you do not have the liberty of using the entire view of the document/web page, use Panel instead. For example, in case your entire web page is using JQuery, but you want to keep a ExtJS grid component, you can do so using a grid panel.
The below forum links might useful to further reading:
- http://www.sencha.com/forum/showthread.php?127906-How-to-start-Layout-View-Container-ViewPort-or-Window
- http://stackoverflow.com/questions/18934929/extjs-4-viewport-vs-panel-with-border-layout-which-to-use-and-why
The only tricky thing that I found with ViewPort is when you want to have the scrolling option, meaning the scrollbars should appear when you reduce the browser window size.
There is autoScorll config, which is by default false. Although there implies that if you make it true it should show you the scrollbars. But, that does not happen often. The reason is something interesting to know.
All this is little contradictory. But the problem gets solved once you provide the width/height or both for the child Panels. The scrollbar does appear after that.
So, in case you want to keep the scrolling, you need to take care of child Panels.
-----------------------------------------------------------------------------
There is autoScorll config, which is by default false. Although there implies that if you make it true it should show you the scrollbars. But, that does not happen often. The reason is something interesting to know.
If you take a look at the docs for ExtJS (4.x), it clearly states, "The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config."
All this is little contradictory. But the problem gets solved once you provide the width/height or both for the child Panels. The scrollbar does appear after that.
So, in case you want to keep the scrolling, you need to take care of child Panels.
-----------------------------------------------------------------------------
- Please note the properties in EtxJS are case-sensitive, so "autscroll" won't work, it must be "autoScroll".
- screen.availWidth and screen.availHeight are provided by java script. You can alternatively use Ext.container.Viewport.getWidth() and Ext.container.Viewport.getHeight() as well.
