X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..530ef4b6c5b943cfa68b779d11cf7de29aa878bf:/docs/output/Ext.Viewport.html diff --git a/docs/output/Ext.Viewport.html b/docs/output/Ext.Viewport.html index 0c63c9d2..11c77554 100644 --- a/docs/output/Ext.Viewport.html +++ b/docs/output/Ext.Viewport.html @@ -1,39 +1,16 @@ -
-
- Properties - Methods - Events - Config Options - Direct Link -
-
-
Observable
-  Component
-    BoxComponent
-      Container
-        Viewport
-

Class Ext.Viewport

- - - - - -
Package:Ext
Defined In:Viewport.js
Class:Viewport
Extends:Container
-
- * -A specialized container representing the viewable application area (the browser viewport). -

The Viewport renders itself to the document body, and automatically sizes itself to the size of +

Properties Methods Events Config Options Direct Link 
Observable
  Component
    BoxComponent
      Container
        Viewport

Class Ext.Viewport

Package:Ext
Defined In:Viewport.js
Class:Viewport
Extends:Container

A specialized container representing the viewable application area (the browser viewport).

+

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. Inner layouts are available by virtue of the fact that all Panels -added to the Viewport, either through its items, or through the items, or the add +in a page. Inner layouts are available by virtue of the fact that all Panels +added to the Viewport, either through its items, or through the items, or the add 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 autoScroll config.

-Example showing a classic application border layout :
new Ext.Viewport({
+for scrolling if needed using the autoScroll config.

+
An example showing a classic application border layout:
new Ext.Viewport({
     layout: 'border',
     items: [{
         region: 'north',
-        html: '<h1 class="x-panel-header">Page Title</h1>',
+        html: '<h1 class="x-panel-header">Page Title</h1>',
         autoHeight: true,
         border: false,
         margins: '0 0 5 0'
@@ -41,288 +18,235 @@ Example showing a classic application border layout :
new Ext.Viewport
         region: 'west',
         collapsible: true,
         title: 'Navigation',
-        xtype: 'treepanel',
-        width: 200,
-        autoScroll: true,
-        split: true,
-        loader: new Ext.tree.TreeLoader(),
-        root: new Ext.tree.AsyncTreeNode({
-            expanded: true,
-            children: [{
-                text: 'Menu Option 1',
-                leaf: true
-            }, {
-                text: 'Menu Option 2',
-                leaf: true
-            }, {
-                text: 'Menu Option 3',
-                leaf: true
-            }]
-        }),
-        rootVisible: false,
-        listeners: {
-            click: function(n) {
-                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
-            }
-        }
-    }, {
-        region: 'center',
-        xtype: 'tabpanel',
-        items: {
-            title: 'Default Tab',
-            html: 'The first tab\'s content. Others may be added dynamically'
-        }
+        width: 200
+        // the west region might typically utilize a TreePanel or a Panel with Accordion layout
     }, {
         region: 'south',
-        title: 'Information',
+        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'
+        }
     }]
-});
- -
- -

Config Options

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Config OptionsDefined By
  - - disabled : Boolean
- Render this component disabled (default is false).
- 		Component
  - - disabledClass : String
- CSS class added to the component when it is disabled (defaults to "x-item-disabled").
- 		Component

Public Events

EventDefined By
\ No newline at end of file