- * method of any of its child Panels may themselves have a layout.</p>
- * <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide
- * for scrolling if needed using the {@link #autoScroll} config.</p>
- * <p>An example showing a classic application border layout:</p><pre><code>
-new Ext.Viewport({
- layout: 'border',
- items: [{
- region: 'north',
- html: '<h1 class="x-panel-header">Page Title</h1>',
- autoHeight: true,
- border: false,
- margins: '0 0 5 0'
- }, {
- region: 'west',
- collapsible: true,
- title: 'Navigation',
- width: 200
- // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
- }, {
- region: 'south',
- title: 'Title for Panel',
- collapsible: true,
- html: 'Information goes here',
- split: true,
- height: 100,
- minHeight: 100
- }, {
- region: 'east',
- title: 'Title for the Grid Panel',
- collapsible: true,
- split: true,
- width: 200,
- xtype: 'grid',
- // remaining grid configuration not shown ...
- // notice that the GridPanel is added directly as the region
- // it is not "overnested" inside another Panel
- }, {
- region: 'center',
- xtype: 'tabpanel', // TabPanel itself has no title
- items: {
- title: 'Default Tab',
- html: 'The first tab\'s content. Others may be added dynamically'
- }
- }]
-});
-</code></pre>
- * @constructor
- * Create a new Viewport
- * @param {Object} config The config object
- * @xtype viewport
+ * method of any of its child Panels may themselves have a layout.
+ *
+ * The Viewport does not provide scrolling, so child Panels within the Viewport should provide
+ * for scrolling if needed using the {@link #autoScroll} config.
+ *
+ * An example showing a classic application border layout:
+ *
+ * @example
+ * Ext.create('Ext.container.Viewport', {
+ * layout: 'border',
+ * items: [{
+ * region: 'north',
+ * html: '<h1 class="x-panel-header">Page Title</h1>',
+ * autoHeight: true,
+ * border: false,
+ * margins: '0 0 5 0'
+ * }, {
+ * region: 'west',
+ * collapsible: true,
+ * title: 'Navigation',
+ * width: 150
+ * // could use a TreePanel or AccordionLayout for navigational items
+ * }, {
+ * region: 'south',
+ * title: 'South Panel',
+ * collapsible: true,
+ * html: 'Information goes here',
+ * split: true,
+ * height: 100,
+ * minHeight: 100
+ * }, {
+ * region: 'east',
+ * title: 'East Panel',
+ * collapsible: true,
+ * split: true,
+ * width: 150
+ * }, {
+ * region: 'center',
+ * xtype: 'tabpanel', // TabPanel itself has no title
+ * activeTab: 0, // First tab active by default
+ * items: {
+ * title: 'Default Tab',
+ * html: 'The first tab\'s content. Others may be added dynamically'
+ * }
+ * }]
+ * });