Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / examples / layout-browser / layouts / basic.js
index 6d73d39..9712428 100644 (file)
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-//\r
-// Note that these are all defined as panel configs, rather than instantiated \r
-// as panel objects.  You could just as easily do this instead:\r
-//\r
-// var absolute = new Ext.Panel({ ... });\r
-//\r
-// However, by passing configs into the main container instead of objects, we can defer \r
-// layout AND object instantiation until absolutely needed.  Since most of these panels\r
-// won't be shown by default until requested, this will save us some processing \r
-// time up front when initially rendering the page.\r
-//\r
-// Since all of these configs are being added into a layout container, they are\r
-// automatically assumed to be panel configs, and so the xtype of 'panel' is\r
-// implicit.  To define a config of some other type of component to be added into\r
-// the layout, simply provide the appropriate xtype config explicitly.\r
-//\r
-/*\r
- * ================  Start page config  =======================\r
- */\r
-// The default start page, also a simple example of a FitLayout.\r
-var start = {\r
-       id: 'start-panel',\r
-       title: 'Start Page',\r
-       layout: 'fit',\r
-       bodyStyle: 'padding:25px',\r
-       contentEl: 'start-div'  // pull existing content from the page\r
-};\r
-\r
-/*\r
- * ================  AnbsoluteLayout config  =======================\r
- */\r
-var absolute = {\r
-       id: 'absolute-panel',\r
-       title: 'Absolute Layout',\r
-       layout: 'absolute',\r
-       defaults: {\r
-               bodyStyle: 'padding:15px;',\r
-               width: 200,\r
-               height: 100,\r
-               frame: true\r
-       },\r
-       items:[{\r
-               title: 'Panel 1',\r
-               x: 50,\r
-               y: 50,\r
-               html: 'Positioned at x:50, y:50'\r
-       },{\r
-               title: 'Panel 2',\r
-               x: 125,\r
-               y: 125,\r
-               html: 'Positioned at x:125, y:125'\r
-       }]\r
-};\r
-\r
-/*\r
- * ================  AccordionLayout config  =======================\r
- */\r
-var accordion = {\r
-    id:'accordion-panel',\r
-       title: 'Accordion Layout',\r
-    layout:'accordion',\r
-    bodyBorder: false,  // useful for accordion containers since the inner panels have borders already\r
-    bodyStyle: 'background-color:#DFE8F6',  // if all accordion panels are collapsed, this looks better in this layout\r
-       defaults: {bodyStyle: 'padding:15px'},\r
-    items: [{\r
-        title: 'Introduction',\r
-               tools: [{id:'gear'},{id:'refresh'}],\r
-               html: '<p>Here is some accordion content.  Click on one of the other bars below for more.</p>'\r
-    },{\r
-        title: 'Basic Content',\r
-               html: '<br /><p>More content.  Open the third panel for a customized look and feel example.</p>',\r
-               items: {\r
-                       xtype: 'button',\r
-                       text: 'Show Next Panel',\r
-                       handler: function(){\r
-                               Ext.getCmp('acc-custom').expand(true);\r
-                       }\r
-               }\r
-    },{\r
-               id: 'acc-custom',\r
-        title: 'Custom Panel Look and Feel',\r
-               cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class\r
-               html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'\r
-    }]\r
-};\r
-\r
-/*\r
- * ================  AnchorLayout config  =======================\r
- */\r
-var anchor = {\r
-       id:'anchor-panel',\r
-       title: 'Anchor Layout',\r
-    layout:'anchor',\r
-       defaults: {bodyStyle: 'padding:15px'},\r
+/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+//
+// Note that these are all defined as panel configs, rather than instantiated
+// as panel objects.  You could just as easily do this instead:
+//
+// var absolute = new Ext.Panel({ ... });
+//
+// However, by passing configs into the main container instead of objects, we can defer
+// layout AND object instantiation until absolutely needed.  Since most of these panels
+// won't be shown by default until requested, this will save us some processing
+// time up front when initially rendering the page.
+//
+// Since all of these configs are being added into a layout container, they are
+// automatically assumed to be panel configs, and so the xtype of 'panel' is
+// implicit.  To define a config of some other type of component to be added into
+// the layout, simply provide the appropriate xtype config explicitly.
+//
+/*
+ * ================  Start page config  =======================
+ */
+// The default start page, also a simple example of a FitLayout.
+var start = {
+       id: 'start-panel',
+       title: 'Start Page',
+       layout: 'fit',
+       bodyStyle: 'padding:25px',
+       contentEl: 'start-div'  // pull existing content from the page
+};
+
+/*
+ * ================  AbsoluteLayout config  =======================
+ */
+var absolute = {
+       id: 'absolute-panel',
+       title: 'Absolute Layout',
+       layout: 'absolute',
+       defaults: {
+               bodyStyle: 'padding:15px;',
+               width: 200,
+               height: 100,
+               frame: true
+       },
+       items:[{
+               title: 'Panel 1',
+               x: 50,
+               y: 50,
+               html: 'Positioned at x:50, y:50'
+       },{
+               title: 'Panel 2',
+               x: 125,
+               y: 125,
+               html: 'Positioned at x:125, y:125'
+       }]
+};
+
+/*
+ * ================  AccordionLayout config  =======================
+ */
+var accordion = {
+    id: 'accordion-panel',
+       title: 'Accordion Layout',
+    layout: 'accordion',
+    bodyBorder: false,  // useful for accordion containers since the inner panels have borders already
+    bodyStyle: 'background-color:#DFE8F6',  // if all accordion panels are collapsed, this looks better in this layout
+       defaults: {bodyStyle: 'padding:15px'},
+    items: [{
+        title: 'Introduction',
+               tools: [{id:'gear'},{id:'refresh'}],
+               html: '<p>Here is some accordion content.  Click on one of the other bars below for more.</p>'
+    },{
+        title: 'Basic Content',
+               html: '<br /><p>More content.  Open the third panel for a customized look and feel example.</p>',
+               items: {
+                       xtype: 'button',
+                       text: 'Show Next Panel',
+                       handler: function(){
+                               Ext.getCmp('acc-custom').expand(true);
+                       }
+               }
+    },{
+               id: 'acc-custom',
+        title: 'Custom Panel Look and Feel',
+               cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
+               html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'
+    }]
+};
+
+/*
+ * ================  AnchorLayout config  =======================
+ */
+var anchor = {
+       id:'anchor-panel',
+       title: 'Anchor Layout',
+    layout:'anchor',
+       defaults: {bodyStyle: 'padding:15px'},
+    items: [{
+        title: 'Panel 1',
+        height: 100,
+               anchor: '50%',
+               html: '<p>Width = 50% of the container</p>'
+    },{
+        title: 'Panel 2',
+        height: 100,
+               anchor: '-100',
+               html: '<p>Width = container width - 100 pixels</p>'
+    },{
+        title: 'Panel 3',
+               anchor: '-10, -262',
+               html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'
+    }]
+};
+
+/*
+ * ================  BorderLayout config  =======================
+ */
+var border = {
+       id:'border-panel',
+       title: 'Border Layout',
+    layout: 'border',
+    bodyBorder: false,
+       defaults: {
+               collapsible: true,
+        split: true,
+               animFloat: false,
+               autoHide: false,
+               useSplitTips: true,
+               bodyStyle: 'padding:15px'
+       },
+    items: [{
+        title: 'Footer',
+               region: 'south',
+        height: 150,
+        minSize: 75,
+        maxSize: 250,
+               cmargins: '5 0 0 0',
+               html: '<p>Footer content</p>'
+    },{
+               title: 'Navigation',
+        region:'west',
+               floatable: false,
+               margins: '5 0 0 0',
+               cmargins: '5 5 0 0',
+        width: 175,
+        minSize: 100,
+        maxSize: 250,
+               html: '<p>Secondary content like navigation links could go here</p>'
+       },{
+               title: 'Main Content',
+               collapsible: false,
+        region: 'center',
+               margins: '5 0 0 0',
+               html: '<h1>Main Page</h1><p>This is where the main content would go</p>'
+       }]
+};
+
+/*
+ * ================  CardLayout config (TabPanel)  =======================
+ */
+// Note that the TabPanel component uses an internal CardLayout -- it is not
+// something you have to explicitly configure.  However, it is still a perfect
+// example of how this layout style can be used in a complex component.
+var cardTabs = {
+       xtype: 'tabpanel',
+       id: 'card-tabs-panel',
+       plain: true,  //remove the header border
+       activeItem: 0,
+       defaults: {bodyStyle: 'padding:15px'},
+       items:[{
+               title: 'Tab 1',
+               html: 'This is tab 1 content.'
+       },{
+               title: 'Tab 2',
+               html: 'This is tab 2 content.'
+       },{
+               title: 'Tab 3',
+               html: 'This is tab 3 content.'
+       }]
+};
+
+// This is a fake CardLayout navigation function.  A real implementation would
+// likely be more sophisticated, with logic to validate navigation flow.  It will
+// be assigned next as the handling function for the buttons in the CardLayout example.
+var cardNav = function(incr){
+       var l = Ext.getCmp('card-wizard-panel').getLayout();
+       var i = l.activeItem.id.split('card-')[1];
+       var next = parseInt(i) + incr;
+       l.setActiveItem(next);
+       Ext.getCmp('card-prev').setDisabled(next==0);
+       Ext.getCmp('card-next').setDisabled(next==2);
+};
+
+/*
+ * ================  CardLayout config (Wizard)  =======================
+ */
+var cardWizard = {
+       id:'card-wizard-panel',
+       title: 'Card Layout (Wizard)',
+    layout:'card',
+       activeItem: 0,
+       bodyStyle: 'padding:15px',
+       defaults: {border:false},
+       bbar: ['->', {
+               id: 'card-prev',
+               text: '&laquo; Previous',
+               handler: cardNav.createDelegate(this, [-1]),
+               disabled: true
+       },{
+               id: 'card-next',
+               text: 'Next &raquo;',
+               handler: cardNav.createDelegate(this, [1])
+       }],
+       items: [{
+               id: 'card-0',
+               html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
+    },{
+               id: 'card-1',
+               html: '<p>Step 2 of 3</p><p>Almost there.  Please click the "Next" button to continue...</p>'
+    },{
+               id: 'card-2',
+               html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
+    }]
+};
+
+/*
+ * ================  ColumnLayout config  =======================
+ */
+var column = {
+       id:'column-panel',
+       title: 'Column Layout',
+    layout: 'column',
+    bodyStyle: 'padding:5px',
+       defaults: {bodyStyle:'padding:15px'},
+    items: [{
+        title: 'Width = 0.25',
+               columnWidth: 0.25,
+               html: '<p>This is some short content.</p>'
+    },{
+        title: 'Width = 0.75',
+               columnWidth: 0.75,
+               html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'
+    },{
+        title: 'Width = 250px',
+               width: 250,
+               html: 'Not much here!'
+       }]
+};
+
+/*
+ * ================  FitLayout config  =======================
+ */
+var fit = {
+       id: 'fit-panel',
+       title: 'Fit Layout',
+    layout: 'fit',
+    items: {
+               title: 'Inner Panel',
+               html: '<p>This panel is fit within its container.</p>',
+               bodyStyle: 'margin:15px',
+               border: false
+    }
+};
+
+/*
+ * ================  FormLayout config  =======================
+ */
+// NOTE: While you can create a basic Panel with layout:'form', practically
+// you should usually use a FormPanel to also get its form-specific functionality.
+// Note that the layout config is not required on FormPanels.
+var form = {
+       xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
+       id: 'form-panel',
+    labelWidth: 75,
+    title: 'Form Layout',
+    bodyStyle: 'padding:15px',
+    width: 350,
+       labelPad: 20,
+       layoutConfig: {
+               labelSeparator: ''
+       },
+    defaults: {
+               width: 230,
+               msgTarget: 'side'
+       },
+    defaultType: 'textfield',
+    items: [{
+            fieldLabel: 'First Name',
+            name: 'first',
+            allowBlank:false
+        },{
+            fieldLabel: 'Last Name',
+            name: 'last'
+        },{
+            fieldLabel: 'Company',
+            name: 'company'
+        },{
+            fieldLabel: 'Email',
+            name: 'email',
+            vtype:'email'
+        }
+    ],
+    buttons: [{text: 'Save'},{text: 'Cancel'}]
+};
+
+/*
+ * ================  TableLayout config  =======================
+ */
+var table = {
+       id: 'table-panel',
+       title: 'Table Layout',
+    layout: 'table',
+       layoutConfig: {
+               columns: 4
+       },
+       defaults: {
+               bodyStyle:'padding:15px 20px'
+       },
+    items: [{
+        title: 'Lots of Spanning',
+               html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',
+               rowspan: 3
+    },{
+        title: 'Basic Table Cell',
+               html: '<p>Basic panel in a table cell.</p>',
+               cellId: 'basic-cell',
+               cellCls: 'custom-cls'
+    },{
+               html: '<p>Plain panel</p>'
+       },{
+        title: 'Another Cell',
+               html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',
+               width: 300,
+               rowspan: 2
+    },{
+               html: 'Plain cell spanning two columns',
+               colspan: 2
+    },{
+               title: 'More Column Spanning',
+               html: '<p>Spanning three columns.</p>',
+               colspan: 3
+       },{
+               title: 'Spanning All Columns',
+               html: '<p>Spanning all columns.</p>',
+               colspan: 4
+       }]
+};
+
+
+/*
+ * ================  VBoxLayout config  =======================
+ */
+var vbox = {\r
+    id: 'vbox-panel',\r
+    title: 'vBox Layout',\r
+    layout: {\r
+        type: 'vbox',\r
+        pack: 'start',\r
+        align: 'stretch'\r
+    },\r
+    defaults: {\r
+        frame: true\r
+    },\r
     items: [{\r
         title: 'Panel 1',\r
-        height: 100,\r
-               anchor: '50%',\r
-               html: '<p>Width = 50% of the container</p>'\r
-    },{\r
+        flex: 1,\r
+        html: 'flex : 1'\r
+    }, {\r
         title: 'Panel 2',\r
         height: 100,\r
-               anchor: '-100',\r
-               html: '<p>Width = container width - 100 pixels</p>'\r
-    },{\r
+        html: 'height: 100'\r
+    }, {\r
         title: 'Panel 3',\r
-               anchor: '-10, -262',\r
-               html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'\r
-    }]\r
-};\r
-\r
-/*\r
- * ================  BorderLayout config  =======================\r
- */\r
-var border = {\r
-       id:'border-panel',\r
-       title: 'Border Layout',\r
-    layout:'border',\r
-    bodyBorder: false,\r
-       defaults: {\r
-               collapsible: true,\r
-        split: true,\r
-               animFloat: false,\r
-               autoHide: false,\r
-               useSplitTips: true,\r
-               bodyStyle: 'padding:15px'\r
-       },\r
-    items: [{\r
-        title: 'Footer',\r
-               region: 'south',\r
-        height: 150,\r
-        minSize: 75,\r
-        maxSize: 250,\r
-               cmargins: '5 0 0 0',\r
-               html: '<p>Footer content</p>'\r
-    },{\r
-               title: 'Navigation',\r
-        region:'west',\r
-               floatable: false,\r
-               margins: '5 0 0 0',\r
-               cmargins: '5 5 0 0',\r
-        width: 175,\r
-        minSize: 100,\r
-        maxSize: 250,\r
-               html: '<p>Secondary content like navigation links could go here</p>'\r
-       },{\r
-               title: 'Main Content',\r
-               collapsible: false,\r
-        region:'center',\r
-               margins: '5 0 0 0',\r
-               html: '<h1>Main Page</h1><p>This is where the main content would go</p>'\r
-       }]\r
-};\r
-\r
-/*\r
- * ================  CardLayout config (TabPanel)  =======================\r
- */\r
-// Note that the TabPanel component uses an internal CardLayout -- it's not\r
-// something you have to explicitly configure.  However, it's still a perfect\r
-// example of how this layout style can be used in a complex component.\r
-var cardTabs = {\r
-       xtype: 'tabpanel',\r
-       id: 'card-tabs-panel',\r
-       plain: true,  //remove the header border\r
-       activeItem: 0,\r
-       defaults: {bodyStyle: 'padding:15px'},\r
-       items:[{\r
-               title: 'Tab 1',\r
-               html: 'This is tab 1 content.'\r
-       },{\r
-               title: 'Tab 2',\r
-               html: 'This is tab 2 content.'\r
-       },{\r
-               title: 'Tab 3',\r
-               html: 'This is tab 3 content.'\r
-       }]\r
-};\r
-\r
-// This is a fake CardLayout navigation function.  A real implementation would\r
-// likely be more sophisticated, with logic to validate navigation flow.  It will\r
-// be assigned next as the handling function for the buttons in the CardLayout example.\r
-var cardNav = function(incr){\r
-       var l = Ext.getCmp('card-wizard-panel').getLayout();\r
-       var i = l.activeItem.id.split('card-')[1];\r
-       var next = parseInt(i) + incr;\r
-       l.setActiveItem(next);\r
-       Ext.getCmp('card-prev').setDisabled(next==0);\r
-       Ext.getCmp('card-next').setDisabled(next==2);\r
-};\r
-\r
-/*\r
- * ================  CardLayout config (Wizard)  =======================\r
- */\r
-var cardWizard = {\r
-       id:'card-wizard-panel',\r
-       title: 'Card Layout (Wizard)',\r
-    layout:'card',\r
-       activeItem: 0,\r
-       bodyStyle: 'padding:15px',\r
-       defaults: {border:false},\r
-       bbar: ['->', {\r
-               id: 'card-prev',\r
-               text: '&laquo; Previous', \r
-               handler: cardNav.createDelegate(this, [-1]),\r
-               disabled: true\r
-       },{\r
-               id: 'card-next',\r
-               text: 'Next &raquo;', \r
-               handler: cardNav.createDelegate(this, [1])\r
-       }],\r
-       items: [{\r
-               id: 'card-0',\r
-               html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'\r
-    },{\r
-               id: 'card-1',\r
-               html: '<p>Step 2 of 3</p><p>Almost there.  Please click the "Next" button to continue...</p>'\r
-    },{\r
-               id: 'card-2',\r
-               html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'\r
+        flex: 2,\r
+        html: 'flex : 2'\r
     }]\r
-};\r
-\r
-/*\r
- * ================  ColumnLayout config  =======================\r
- */\r
-var column = {\r
-       id:'column-panel',\r
-       title: 'Column Layout',\r
-    layout:'column',\r
-    bodyStyle:'padding:5px',\r
-       defaults: {bodyStyle:'padding:15px'},\r
-    items: [{\r
-        title: 'Width = .25',\r
-               columnWidth: .25,\r
-               html: '<p>This is some short content.</p>'\r
-    },{\r
-        title: 'Width = .75',\r
-               columnWidth: .75,\r
-               html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'\r
-    },{\r
-        title: 'Width = 250px',\r
-               width: 250,\r
-               html: 'Not much here!'\r
-       }]\r
-};\r
-\r
-/*\r
- * ================  FitLayout config  =======================\r
- */\r
-var fit = {\r
-       id:'fit-panel',\r
-       title: 'Fit Layout',\r
-    layout:'fit',\r
-    items: {\r
-               title: 'Inner Panel',\r
-               html: '<p>This panel is fit within its container.</p>',\r
-               bodyStyle: 'margin:15px',\r
-               border: false\r
-    }\r
-};\r
-\r
-/*\r
- * ================  FormLayout config  =======================\r
- */\r
-// NOTE: While you can create a basic Panel with layout:'form', practically\r
-// you should usually use a FormPanel to also get its form-specific functionality.\r
-// Note that the layout config is not required on FormPanels.\r
-var form = {\r
-       xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it\r
-       id: 'form-panel',\r
-    labelWidth: 75,\r
-    title: 'Form Layout',\r
-    bodyStyle:'padding:15px',\r
-    width: 350,\r
-       labelPad: 20,\r
-       layoutConfig: {\r
-               labelSeparator: ''\r
-       },\r
+};
+
+/*
+ * ================  HBoxLayout config  =======================
+ */
+var hbox = {\r
+    id: 'hbox-panel',\r
+    title: 'hBox Layout',\r
+    layout: {\r
+        type: 'hbox',\r
+        pack: 'start',\r
+        align: 'stretch'\r
+    },\r
     defaults: {\r
-               width: 230,\r
-               msgTarget: 'side'\r
-       },\r
-    defaultType: 'textfield',\r
-    items: [{\r
-            fieldLabel: 'First Name',\r
-            name: 'first',\r
-            allowBlank:false\r
-        },{\r
-            fieldLabel: 'Last Name',\r
-            name: 'last'\r
-        },{\r
-            fieldLabel: 'Company',\r
-            name: 'company'\r
-        },{\r
-            fieldLabel: 'Email',\r
-            name: 'email',\r
-            vtype:'email'\r
-        }\r
-    ],\r
-    buttons: [{text: 'Save'},{text: 'Cancel'}]\r
-};\r
-\r
-/*\r
- * ================  TableLayout config  =======================\r
- */\r
-var table = {\r
-       id:'table-panel',\r
-       title: 'Table Layout',\r
-    layout:'table',\r
-       layoutConfig: {\r
-               columns: 4\r
-       },\r
-       defaults: {\r
-               bodyStyle:'padding:15px 20px'\r
-       },\r
+        frame: true\r
+    },\r
     items: [{\r
-        title: 'Lots of Spanning',\r
-               html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',\r
-               rowspan: 3\r
-    },{\r
-        title: 'Basic Table Cell',\r
-               html: '<p>Basic panel in a table cell.</p>',\r
-               cellId: 'basic-cell',\r
-               cellCls: 'custom-cls'\r
-    },{\r
-               html: '<p>Plain panel</p>'\r
-       },{\r
-        title: 'Another Cell',\r
-               html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',\r
-               width: 300,\r
-               rowspan: 2\r
-    },{\r
-               html: 'Plain cell spanning two columns',\r
-               colspan: 2\r
-    },{\r
-               title: 'More Column Spanning',\r
-               html: '<p>Spanning three columns.</p>',\r
-               colspan: 3\r
-       },{\r
-               title: 'Spanning All Columns',\r
-               html: '<p>Spanning all columns.</p>',\r
-               colspan: 4\r
-       }]\r
-};\r
+        title: 'Panel 1',\r
+        flex: 1,\r
+        html: 'flex : 1'\r
+    }, {\r
+        title: 'Panel 2',\r
+        width: 100,\r
+        html: 'width : 100'\r
+    }, {\r
+        title: 'Panel 3',\r
+        flex: 2,\r
+        html: 'flex : 2'\r
+    }]\r
+};