Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / examples / debug / debug-console.html
index 7c39763..56edc6c 100644 (file)
-<html>\r
-<head>\r
-  <title>Debug Console</title>\r
-       <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />\r
-       <link rel="stylesheet" type="text/css" href="debug.css" />\r
-\r
-    <!-- GC -->\r
-       <!-- LIBS -->\r
-       <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
-       <!-- ENDLIBS -->\r
-\r
-    <script type="text/javascript" src="../../ext-all.js"></script>\r
-    <script type="text/javascript" src="debug.js"></script>\r
-\r
-       <style type="text/css">\r
-       html, body {\r
-        font:normal 12px verdana;\r
-        margin:0;\r
-        padding:0;\r
-        border:0 none;\r
-        overflow:hidden;\r
-        height:100%;\r
-    }\r
-       p {\r
-           margin:5px;\r
-       }\r
-    .settings {\r
-        background-image:url(../shared/icons/fam/folder_wrench.png);\r
-    }\r
-    .nav {\r
-        background-image:url(../shared/icons/fam/folder_go.png);\r
-    }\r
-    </style>\r
-       <script type="text/javascript">\r
-    Ext.onReady(function(){\r
-\r
-        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\r
-\r
-Ext.ns('App');\r
-\r
-App.BookStore = function(config) {\r
-       var config = config || {};\r
-       Ext.applyIf(config, {\r
-               reader: new Ext.data.XmlReader({\r
-           // records will have an "Item" tag\r
-           record: 'Item',\r
-           id: 'ASIN',\r
-           totalRecords: '@total'\r
-       }, [\r
-           // set up the fields mapping into the xml doc\r
-           // The first needs mapping, the others are very basic\r
-           {name: 'Author', mapping: 'ItemAttributes > Author'},\r
-           'Title',\r
-                  'Manufacturer',\r
-                  'ProductGroup',\r
-                  // Detail URL is not part of the column model of the grid\r
-                  'DetailPageURL'\r
-       ])\r
-       });\r
-       // call the superclass's constructor\r
-       App.BookStore.superclass.constructor.call(this, config);\r
-};\r
-Ext.extend(App.BookStore, Ext.data.Store);\r
-\r
-\r
-\r
-App.BookGrid = Ext.extend(Ext.grid.GridPanel, {\r
-       // override\r
-       initComponent : function() {\r
-               Ext.apply(this, {\r
-                       // Pass in a column model definition\r
-                       // Note that the DetailPageURL was defined in the record definition but is not used\r
-                       // here. That is okay.\r
-               columns: [\r
-                   {header: "Author", width: 120, dataIndex: 'Author', sortable: true},\r
-                   {header: "Title", dataIndex: 'Title', sortable: true},\r
-                   {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},\r
-                   {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}\r
-               ],\r
-                       sm: new Ext.grid.RowSelectionModel({singleSelect: true}),\r
-                       // Note the use of a storeId, this will register thisStore\r
-                       // with the StoreMgr and allow us to retrieve it very easily.\r
-                       store: new App.BookStore({\r
-                               storeId: 'gridBookStore',\r
-                               url: 'sheldon.xml'\r
-                       }),\r
-                       // force the grid to fit the space which is available\r
-                       viewConfig: {\r
-                               forceFit: true\r
-                       }\r
-               });\r
-               // finally call the superclasses implementation\r
-               App.BookGrid.superclass.initComponent.call(this);\r
-       }\r
-});\r
-Ext.reg('bookgrid', App.BookGrid);\r
-\r
-\r
-/**\r
- * App.BookDetail\r
- * @extends Ext.Panel\r
- * This is a specialized Panel which is used to show information about\r
- * a book.\r
- *\r
- * This demonstrates adding 2 custom properties (tplMarkup and\r
- * startingMarkup) to the class. It also overrides the initComponent\r
- * method and adds a new method called updateDetail.\r
- *\r
- * The class will be registered with an xtype of 'bookdetail'\r
- */\r
-App.BookDetail = Ext.extend(Ext.Panel, {\r
-       // add tplMarkup as a new property\r
-       tplMarkup: [\r
-               'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',\r
-               'Author: {Author}<br/>',\r
-               'Manufacturer: {Manufacturer}<br/>',\r
-               'Product Group: {ProductGroup}<br/>'\r
-       ],\r
-       // startingMarup as a new property\r
-       startingMarkup: 'Please select a book to see additional details',\r
-       // override initComponent to create and compile the template\r
-       // apply styles to the body of the panel and initialize\r
-       // html to startingMarkup\r
-       initComponent: function() {\r
-               this.tpl = new Ext.Template(this.tplMarkup);\r
-               Ext.apply(this, {\r
-                       bodyStyle: {\r
-                               background: '#ffffff',\r
-                               padding: '7px'\r
-                       },\r
-                       html: this.startingMarkup\r
-               });\r
-               // call the superclass's initComponent implementation\r
-               App.BookDetail.superclass.initComponent.call(this);\r
-       },\r
-       // add a method which updates the details\r
-       updateDetail: function(data) {\r
-               this.tpl.overwrite(this.body, data);\r
-       }\r
-});\r
-// register the App.BookDetail class with an xtype of bookdetail\r
-Ext.reg('bookdetail', App.BookDetail);\r
-\r
-\r
-/**\r
- * App.BookMasterDetail\r
- * @extends Ext.Panel\r
- *\r
- * This is a specialized panel which is composed of both a bookgrid\r
- * and a bookdetail panel. It provides the glue between the two\r
- * components to allow them to communicate. You could consider this\r
- * the actual application.\r
- *\r
- */\r
-App.BookMasterDetail = Ext.extend(Ext.Panel, {\r
-       // override initComponent\r
-       initComponent: function() {\r
-               // used applyIf rather than apply so user could\r
-               // override the defaults\r
-               Ext.applyIf(this, {\r
-                       frame: true,\r
-                       title: 'Book List',\r
-                       width: 540,\r
-                       height: 400,\r
-                       layout: 'border',\r
-                       items: [{\r
-                               xtype: 'bookgrid',\r
-                               itemId: 'gridPanel',\r
-                               region: 'north',\r
-                               height: 210,\r
-                               split: true\r
-                       },{\r
-                               xtype: 'bookdetail',\r
-                               itemId: 'detailPanel',\r
-                               region: 'center'\r
-                       }]\r
-               })\r
-               // call the superclass's initComponent implementation\r
-               App.BookMasterDetail.superclass.initComponent.call(this);\r
-       },\r
-       // override initEvents\r
-       initEvents: function() {\r
-               // call the superclass's initEvents implementation\r
-               App.BookMasterDetail.superclass.initEvents.call(this);\r
-\r
-               // now add application specific events\r
-               // notice we use the selectionmodel's rowselect event rather\r
-               // than a click event from the grid to provide key navigation\r
-               // as well as mouse navigation\r
-               var bookGridSm = this.getComponent('gridPanel').getSelectionModel();\r
-               bookGridSm.on('rowselect', this.onRowSelect, this);\r
-       },\r
-       // add a method called onRowSelect\r
-       // This matches the method signature as defined by the 'rowselect'\r
-       // event defined in Ext.grid.RowSelectionModel\r
-       onRowSelect: function(sm, rowIdx, r) {\r
-               // getComponent will retrieve itemId's or id's. Note that itemId's\r
-               // are scoped locally to this instance of a component to avoid\r
-               // conflicts with the ComponentMgr\r
-               var detailPanel = this.getComponent('detailPanel');\r
-               detailPanel.updateDetail(r.data);\r
-       }\r
-});\r
-// register an xtype with this class\r
-Ext.reg('bookmasterdetail', App.BookMasterDetail);\r
-\r
-\r
-// Finally now that we've defined all of our classes we can instantiate\r
-// an instance of the app and renderTo an existing div called 'binding-example'\r
-// Note now that classes have encapsulated this behavior we can easily create\r
-// an instance of this app to be used in many different contexts, you could\r
-// easily place this application in an Ext.Window for example\r
-       // create an instance of the app\r
-       var bookApp = new App.BookMasterDetail({\r
-               renderTo: 'center2'\r
-       });\r
-       // We can retrieve a reference to the data store\r
-       // via the StoreMgr by its storeId\r
-       Ext.StoreMgr.get('gridBookStore').load();\r
-\r
-\r
-\r
-\r
-       var viewport = new Ext.Viewport({\r
-            id: 'viewport-component',\r
-            layout:'border',\r
-            items:[\r
-                new Ext.BoxComponent({ // raw\r
-                    id:'north-panel',\r
-                    region:'north',\r
-                    el: 'north',\r
-                    height:32\r
-                }),{\r
-                    id:'south-panel',\r
-                    region:'south',\r
-                    contentEl: 'south',\r
-                    split:true,\r
-                    height: 100,\r
-                    minSize: 100,\r
-                    maxSize: 200,\r
-                    collapsible: true,\r
-                    title:'South',\r
-                    margins:'0 0 0 0'\r
-                }, {\r
-                    id:'east-panel',\r
-                    region:'east',\r
-                    title: 'East Side',\r
-                    collapsible: true,\r
-                    split:true,\r
-                    width: 225,\r
-                    minSize: 175,\r
-                    maxSize: 400,\r
-                    layout:'fit',\r
-                    margins:'0 5 0 0',\r
-                    items:\r
-                        new Ext.TabPanel({\r
-                            border:false,\r
-                            activeTab:1,\r
-                            tabPosition:'bottom',\r
-                            items:[{\r
-                                html:'<p>A TabPanel component can be a region.</p>',\r
-                                title: 'A Tab',\r
-                                autoScroll:true\r
-                            },\r
-                            new Ext.grid.PropertyGrid({\r
-                                id:'propGrid',\r
-                                title: 'Property Grid',\r
-                                closable: true,\r
-                                source: {\r
-                                    "(name)": "Properties Grid",\r
-                                    "grouping": false,\r
-                                    "autoFitColumns": true,\r
-                                    "productionQuality": false,\r
-                                    "created": new Date(Date.parse('10/15/2006')),\r
-                                    "tested": false,\r
-                                    "version": .01,\r
-                                    "borderWidth": 1\r
-                                }\r
-                            })]\r
-                        })\r
-                 },{\r
-                    region:'west',\r
-                    id:'west-panel',\r
-                    title:'West',\r
-                    split:true,\r
-                    width: 200,\r
-                    minSize: 175,\r
-                    maxSize: 400,\r
-                    collapsible: true,\r
-                    margins:'0 0 0 5',\r
-                    layout:'accordion',\r
-                    layoutConfig:{\r
-                        animate:true\r
-                    },\r
-                    items: [{\r
-                        id:'west-nav',\r
-                        contentEl: 'west',\r
-                        title:'Navigation',\r
-                        border:false,\r
-                        iconCls:'nav'\r
-                    },{\r
-                        id:'west-settings',\r
-                        title:'Settings',\r
-                        html:'<p>Some settings in here.</p>',\r
-                        border:false,\r
-                        iconCls:'settings'\r
-                    }]\r
-                },\r
-                new Ext.TabPanel({\r
-                    id:'center-region',\r
-                    region:'center',\r
-                    deferredRender:false,\r
-                    activeTab:0,\r
-                    items:[{\r
-                        id:'first-tab',\r
-                        contentEl:'center1',\r
-                        title: 'Close Me',\r
-                        closable:true,\r
-                        autoScroll:true\r
-                    },{\r
-                        id:'second-tab',\r
-                        contentEl:'center2',\r
-                        title: 'Center Panel',\r
-                        autoScroll:true\r
-                    }]\r
-                })\r
-             ]\r
-        });\r
-    });\r
-       </script>\r
-</head>\r
-<body>\r
-<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->\r
-  <div id="west">\r
-    <p>Hi. I'm the west panel.</p>\r
-  </div>\r
-  <div id="north">\r
-    <p>north - generally for menus, toolbars and/or advertisements</p>\r
-  </div>\r
-  <div id="center2">\r
-  </div>\r
-  <div id="center1">\r
-        <p>Included in ext-all-debug.js is the Ext Debug Console. It offers a limited amount of <a href="http://getfirebug.com">FireBug</a>\r
-        functionality cross browser. The most important feature is the "DOM Inspector" and CSS and DOM attribute editing. In any browser where "console"\r
-        is not already defined, the Ext console will handle console.log(), time() and other calls.\r
-    </p>\r
-   <p>\r
-       <b>Try It</b><br/>\r
-       This page includes ext-all-debug.js and some test markup so you can try it out. Click on the image below to bring up the console.\r
-   </p>\r
-   <a href="#" onclick="Ext.log('Hello from the Ext console. This is logged using the Ext.log function.');return false;"><img src="debug.png" style="margin:15px;"/></a>\r
-\r
-    <p>\r
-        The full source is available in the "source" directory of the Ext download.\r
-    </p>\r
-  </div>\r
-  <div id="props-panel" style="width:200px;height:200px;overflow:hidden;">\r
-  </div>\r
-  <div id="south">\r
-    <p>south - generally for informational stuff, also could be for status bar</p>\r
-  </div>\r
-\r
- </body>\r
-</html>\r
+<html>
+<head>
+  <title>Debug Console</title>
+       <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+       <link rel="stylesheet" type="text/css" href="../../resources/css/debug.css" />
+
+    <!-- GC -->
+       <!-- LIBS -->
+       <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
+       <!-- ENDLIBS -->
+
+    <script type="text/javascript" src="../../ext-all.js"></script>
+    <script type="text/javascript" src="../../src/debug.js"></script>
+
+       <style type="text/css">
+       html, body {
+        font:normal 12px verdana;
+        margin:0;
+        padding:0;
+        border:0 none;
+        overflow:hidden;
+        height:100%;
+    }
+       p {
+           margin:5px;
+       }
+    .settings {
+        background-image:url(../shared/icons/fam/folder_wrench.png);
+    }
+    .nav {
+        background-image:url(../shared/icons/fam/folder_go.png);
+    }
+    </style>
+       <script type="text/javascript">
+    Ext.onReady(function(){
+
+        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+
+Ext.ns('App');
+
+App.BookStore = function(config) {
+       var config = config || {};
+       Ext.applyIf(config, {
+               reader: new Ext.data.XmlReader({
+           // records will have an "Item" tag
+           record: 'Item',
+           id: 'ASIN',
+           totalRecords: '@total'
+       }, [
+           // set up the fields mapping into the xml doc
+           // The first needs mapping, the others are very basic
+           {name: 'Author', mapping: 'ItemAttributes > Author'},
+           'Title',
+                  'Manufacturer',
+                  'ProductGroup',
+                  // Detail URL is not part of the column model of the grid
+                  'DetailPageURL'
+       ])
+       });
+       // call the superclass's constructor
+       App.BookStore.superclass.constructor.call(this, config);
+};
+Ext.extend(App.BookStore, Ext.data.Store);
+
+
+
+App.BookGrid = Ext.extend(Ext.grid.GridPanel, {
+       // override
+       initComponent : function() {
+               Ext.apply(this, {
+                       // Pass in a column model definition
+                       // Note that the DetailPageURL was defined in the record definition but is not used
+                       // here. That is okay.
+               columns: [
+                   {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
+                   {header: "Title", dataIndex: 'Title', sortable: true},
+                   {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
+                   {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}
+               ],
+                       sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
+                       // Note the use of a storeId, this will register thisStore
+                       // with the StoreMgr and allow us to retrieve it very easily.
+                       store: new App.BookStore({
+                               storeId: 'gridBookStore',
+                               url: 'sheldon.xml'
+                       }),
+                       // force the grid to fit the space which is available
+                       viewConfig: {
+                               forceFit: true
+                       }
+               });
+               // finally call the superclasses implementation
+               App.BookGrid.superclass.initComponent.call(this);
+       }
+});
+Ext.reg('bookgrid', App.BookGrid);
+
+
+/**
+ * App.BookDetail
+ * @extends Ext.Panel
+ * This is a specialized Panel which is used to show information about
+ * a book.
+ *
+ * This demonstrates adding 2 custom properties (tplMarkup and
+ * startingMarkup) to the class. It also overrides the initComponent
+ * method and adds a new method called updateDetail.
+ *
+ * The class will be registered with an xtype of 'bookdetail'
+ */
+App.BookDetail = Ext.extend(Ext.Panel, {
+       // add tplMarkup as a new property
+       tplMarkup: [
+               'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
+               'Author: {Author}<br/>',
+               'Manufacturer: {Manufacturer}<br/>',
+               'Product Group: {ProductGroup}<br/>'
+       ],
+       // startingMarup as a new property
+       startingMarkup: 'Please select a book to see additional details',
+       // override initComponent to create and compile the template
+       // apply styles to the body of the panel and initialize
+       // html to startingMarkup
+       initComponent: function() {
+               this.tpl = new Ext.Template(this.tplMarkup);
+               Ext.apply(this, {
+                       bodyStyle: {
+                               background: '#ffffff',
+                               padding: '7px'
+                       },
+                       html: this.startingMarkup
+               });
+               // call the superclass's initComponent implementation
+               App.BookDetail.superclass.initComponent.call(this);
+       },
+       // add a method which updates the details
+       updateDetail: function(data) {
+               this.tpl.overwrite(this.body, data);
+       }
+});
+// register the App.BookDetail class with an xtype of bookdetail
+Ext.reg('bookdetail', App.BookDetail);
+
+
+/**
+ * App.BookMasterDetail
+ * @extends Ext.Panel
+ *
+ * This is a specialized panel which is composed of both a bookgrid
+ * and a bookdetail panel. It provides the glue between the two
+ * components to allow them to communicate. You could consider this
+ * the actual application.
+ *
+ */
+App.BookMasterDetail = Ext.extend(Ext.Panel, {
+       // override initComponent
+       initComponent: function() {
+               // used applyIf rather than apply so user could
+               // override the defaults
+               Ext.applyIf(this, {
+                       frame: true,
+                       title: 'Book List',
+                       width: 540,
+                       height: 400,
+                       layout: 'border',
+                       items: [{
+                               xtype: 'bookgrid',
+                               itemId: 'gridPanel',
+                               region: 'north',
+                               height: 210,
+                               split: true
+                       },{
+                               xtype: 'bookdetail',
+                               itemId: 'detailPanel',
+                               region: 'center'
+                       }]
+               })
+               // call the superclass's initComponent implementation
+               App.BookMasterDetail.superclass.initComponent.call(this);
+       },
+       // override initEvents
+       initEvents: function() {
+               // call the superclass's initEvents implementation
+               App.BookMasterDetail.superclass.initEvents.call(this);
+
+               // now add application specific events
+               // notice we use the selectionmodel's rowselect event rather
+               // than a click event from the grid to provide key navigation
+               // as well as mouse navigation
+               var bookGridSm = this.getComponent('gridPanel').getSelectionModel();
+               bookGridSm.on('rowselect', this.onRowSelect, this);
+       },
+       // add a method called onRowSelect
+       // This matches the method signature as defined by the 'rowselect'
+       // event defined in Ext.grid.RowSelectionModel
+       onRowSelect: function(sm, rowIdx, r) {
+               // getComponent will retrieve itemId's or id's. Note that itemId's
+               // are scoped locally to this instance of a component to avoid
+               // conflicts with the ComponentMgr
+               var detailPanel = this.getComponent('detailPanel');
+               detailPanel.updateDetail(r.data);
+       }
+});
+// register an xtype with this class
+Ext.reg('bookmasterdetail', App.BookMasterDetail);
+
+
+// Finally now that we've defined all of our classes we can instantiate
+// an instance of the app and renderTo an existing div called 'binding-example'
+// Note now that classes have encapsulated this behavior we can easily create
+// an instance of this app to be used in many different contexts, you could
+// easily place this application in an Ext.Window for example
+       // create an instance of the app
+       var bookApp = new App.BookMasterDetail({
+               renderTo: 'center2'
+       });
+       // We can retrieve a reference to the data store
+       // via the StoreMgr by its storeId
+       Ext.StoreMgr.get('gridBookStore').load();
+
+
+
+
+       var viewport = new Ext.Viewport({
+            id: 'viewport-component',
+            layout:'border',
+            items:[
+                new Ext.BoxComponent({ // raw
+                    id:'north-panel',
+                    region:'north',
+                    el: 'north',
+                    height:32
+                }),{
+                    id:'south-panel',
+                    region:'south',
+                    contentEl: 'south',
+                    split:true,
+                    height: 100,
+                    minSize: 100,
+                    maxSize: 200,
+                    collapsible: true,
+                    title:'South',
+                    margins:'0 0 0 0'
+                }, {
+                    id:'east-panel',
+                    region:'east',
+                    title: 'East Side',
+                    collapsible: true,
+                    split:true,
+                    width: 225,
+                    minSize: 175,
+                    maxSize: 400,
+                    layout:'fit',
+                    margins:'0 5 0 0',
+                    items:
+                        new Ext.TabPanel({
+                            border:false,
+                            activeTab:1,
+                            tabPosition:'bottom',
+                            items:[{
+                                html:'<p>A TabPanel component can be a region.</p>',
+                                title: 'A Tab',
+                                autoScroll:true
+                            },
+                            new Ext.grid.PropertyGrid({
+                                id:'propGrid',
+                                title: 'Property Grid',
+                                closable: true,
+                                source: {
+                                    "(name)": "Properties Grid",
+                                    "grouping": false,
+                                    "autoFitColumns": true,
+                                    "productionQuality": false,
+                                    "created": new Date(Date.parse('10/15/2006')),
+                                    "tested": false,
+                                    "version": .01,
+                                    "borderWidth": 1
+                                }
+                            })]
+                        })
+                 },{
+                    region:'west',
+                    id:'west-panel',
+                    title:'West',
+                    split:true,
+                    width: 200,
+                    minSize: 175,
+                    maxSize: 400,
+                    collapsible: true,
+                    margins:'0 0 0 5',
+                    layout:'accordion',
+                    layoutConfig:{
+                        animate:true
+                    },
+                    items: [{
+                        id:'west-nav',
+                        contentEl: 'west',
+                        title:'Navigation',
+                        border:false,
+                        iconCls:'nav'
+                    },{
+                        id:'west-settings',
+                        title:'Settings',
+                        html:'<p>Some settings in here.</p>',
+                        border:false,
+                        iconCls:'settings'
+                    }]
+                },
+                new Ext.TabPanel({
+                    id:'center-region',
+                    region:'center',
+                    deferredRender:false,
+                    activeTab:0,
+                    items:[{
+                        id:'first-tab',
+                        contentEl:'center1',
+                        title: 'Close Me',
+                        closable:true,
+                        autoScroll:true
+                    },{
+                        id:'second-tab',
+                        contentEl:'center2',
+                        title: 'Center Panel',
+                        autoScroll:true
+                    }]
+                })
+             ]
+        });
+    });
+       </script>
+</head>
+<body>
+<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
+  <div id="west">
+    <p>Hi. I'm the west panel.</p>
+  </div>
+  <div id="north">
+    <p>north - generally for menus, toolbars and/or advertisements</p>
+  </div>
+  <div id="center2">
+  </div>
+  <div id="center1">
+        <p>Included in ext-all-debug.js is the Ext Debug Console. It offers a limited amount of <a href="http://getfirebug.com">FireBug</a>
+        functionality cross browser. The most important feature is the "DOM Inspector" and CSS and DOM attribute editing. In any browser where "console"
+        is not already defined, the Ext console will handle console.log(), time() and other calls.
+    </p>
+   <p>
+       <b>Try It</b><br/>
+       This page includes ext-all-debug.js and some test markup so you can try it out. Click on the image below to bring up the console.
+   </p>
+   <a href="#" onclick="Ext.log('Hello from the Ext console. This is logged using the Ext.log function.');return false;"><img src="debug.png" style="margin:15px;"/></a>
+
+    <p>
+        The full source is available in the "source" directory of the Ext download.
+    </p>
+  </div>
+  <div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
+  </div>
+  <div id="south">
+    <p>south - generally for informational stuff, also could be for status bar</p>
+  </div>
+
+ </body>
+</html>