Interview Focused : What is ViewPort in Ext JS? 10 Points

1) Viewport is a container that automatically resizes itself to the size of the whole browser window. You can then add other ExtJS UI components and containers in it.

2) The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.

3) Like any Container, a Viewport will only perform sizing and positioning on its child Components if you configure it with a layout.

4) A Common layout used with Viewport is border layout, but if the required layout is simpler, a different layout should be chosen.

5) The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.

6) Mostly viewport is defined inside of the views/Viewport.js file of your application as illustrated by the following code snippet:

1. Ext.define('MyApp.view.Viewport', {
2. extend: 'Ext.container.Viewport'
3. }

7) the /app/view/Viewport.js file will be automatically loaded and instantiated if the autoCreateViewport property is set to true from within your Ext.application() definition.

1. autoCreateViewport: true,

8) A simple Viewport

1. Ext.application({
2. requires: ['City.view.Viewport'],
3. name: 'city',
5. autoCreateViewport: false,
7. launch: function () {
8. Ext.create('Ext.container.Viewport', {
9. layout: 'fit',
10. html: 'Viewable Body of the Html'
11. });
12. }
13. });

9) A viewport has regions that are laid out in the same way as a compass, with North,South, East and West regions—the Center region represents what’s left over in the middle. These directions tell the panels where to align themselves within the viewport and, if you use them, where the resizable borders are to be placed.

10) Check this out for Viewport on fiddle : http://jsfiddle.net/dbrin/Zk4Ah/