X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6a7e4474cba9d8be4b2ec445e10f1691f7277c50..HEAD:/examples/layout-browser/layouts/basic.js

diff --git a/examples/layout-browser/layouts/basic.js b/examples/layout-browser/layouts/basic.js
index 7dcb91f4..adb97638 100644
--- a/examples/layout-browser/layouts/basic.js
+++ b/examples/layout-browser/layouts/basic.js
@@ -1,14 +1,22 @@
-/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact:  http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
 //
 // 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({ ... });
+// var absolute = Ext.create('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
@@ -20,390 +28,393 @@
 // 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
-};
+function getBasicLayouts() {
+    // 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, 10) + incr;
+        l.setActiveItem(next);
+        Ext.getCmp('card-prev').setDisabled(next===0);
+        Ext.getCmp('card-next').setDisabled(next===2);
+    };
+    return {
+        /*
+         * ================  Start page config  =======================
+         */
+        // The default start page, also a simple example of a FitLayout.
+        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'
-    }]
-};
+        /*
+         * ================  AbsoluteLayout config  =======================
+         */
+        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>'
-    }]
-};
+        /*
+         * ================  AccordionLayout config  =======================
+         */
+        accordion: {
+            id: 'accordion-panel',
+            title: 'Accordion Layout',
+            layout: 'accordion',
+            bodyStyle: 'background-color:#DFE8F6',  // if all accordion panels are collapsed, this looks better in this layout
+            defaults: {bodyStyle: 'padding:15px'},
+            items: [{
+                title: 'Introduction',
+                tools: [{type:'gear'},{type:'refresh'}],
+                html: '<p>Here is some accordion content.  Click on one of the other bars below for more.</p>'
+            },{
+                title: 'Basic Content',
+                html: '<br /><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>'
-    }]
-};
+        /*
+         * ================  AnchorLayout config  =======================
+         */
+        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>'
-    }]
-};
+        /*
+         * ================  BorderLayout config  =======================
+         */
+        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
-    activeTab: 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.'
-    }]
-};
+        /*
+         * ================  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.
+        cardTabs: {
+            xtype: 'tabpanel',
+            id: 'card-tabs-panel',
+            plain: true,  //remove the header border
+            activeTab: 0,
+            style: 'background-color:#dfe8f6; ',
+            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, 10) + incr;
-    l.setActiveItem(next);
-    Ext.getCmp('card-prev').setDisabled(next==0);
-    Ext.getCmp('card-next').setDisabled(next==2);
-};
+        /*
+         * ================  CardLayout config (Wizard)  =======================
+         */
+        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: Ext.Function.bind(cardNav, this, [-1]),
+                disabled: true
+            },{
+                id: 'card-next',
+                text: 'Next &raquo;',
+                handler: Ext.Function.bind(cardNav, 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>'
+            }]
+        },
 
-/*
- * ================  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  =======================
+         */
+        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!'
+            }]
+        },
 
-/*
- * ================  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  =======================
+         */
+        fit: {
+            id: 'fit-panel',
+            title: 'Fit Layout',
+            layout: 'fit',
+            items: {
+                title: 'Inner Panel',
+                html: '<p>This panel is fit within its container.</p>',
+                bodyStyle: 'padding:15px',
+                border: false
+            }
+        },
 
-/*
- * ================  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.
+        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,
 
-/*
- * ================  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'}]
-};
+            defaults: {
+                width: 230,
+                labelSeparator: '',
+                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
-    }]
-};
+        /*
+         * ================  TableLayout config  =======================
+         */
+        table: {
+            id: 'table-panel',
+            title: 'Table Layout',
+            layout: {
+                type: 'table',
+                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 = {
-    id: 'vbox-panel',
-    title: 'vBox Layout',
-    layout: {
-        type: 'vbox',
-        pack: 'start',
-        align: 'stretch'
-    },
-    defaults: {
-        frame: true
-    },
-    items: [{
-        title: 'Panel 1',
-        flex: 1,
-        html: 'flex : 1'
-    }, {
-        title: 'Panel 2',
-        height: 100,
-        html: 'height: 100'
-    }, {
-        title: 'Panel 3',
-        flex: 2,
-        html: 'flex : 2'
-    }]
-};
+        /*
+         * ================  VBoxLayout config  =======================
+         */
+        vbox: {
+            id: 'vbox-panel',
+            title: 'vBox Layout',
+            layout: {
+                type: 'vbox',
+                pack: 'start',
+                align: 'stretch'
+            },
+            defaults: {
+                frame: true
+            },
+            items: [{
+                title: 'Panel 1',
+                flex: 1,
+                html: 'flex : 1'
+            }, {
+                title: 'Panel 2',
+                height: 100,
+                html: 'height: 100'
+            }, {
+                title: 'Panel 3',
+                flex: 2,
+                html: 'flex : 2'
+            }]
+        },
+
+        /*
+         * ================  HBoxLayout config  =======================
+         */
+        hbox: {
+            id: 'hbox-panel',
+            title: 'hBox Layout',
+            layout: {
+                type: 'hbox',
+                pack: 'start',
+                align: 'stretch'
+            },
+            defaults: {
+                frame: true
+            },
+            items: [{
+                title: 'Panel 1',
+                flex: 1,
+                html: 'flex : 1'
+            }, {
+                title: 'Panel 2',
+                width: 100,
+                html: 'width : 100'
+            }, {
+                title: 'Panel 3',
+                flex: 2,
+                html: 'flex : 2'
+            }]
+        }
+    };
+}
 
-/*
- * ================  HBoxLayout config  =======================
- */
-var hbox = {
-    id: 'hbox-panel',
-    title: 'hBox Layout',
-    layout: {
-        type: 'hbox',
-        pack: 'start',
-        align: 'stretch'
-    },
-    defaults: {
-        frame: true
-    },
-    items: [{
-        title: 'Panel 1',
-        flex: 1,
-        html: 'flex : 1'
-    }, {
-        title: 'Panel 2',
-        width: 100,
-        html: 'width : 100'
-    }, {
-        title: 'Panel 3',
-        flex: 2,
-        html: 'flex : 2'
-    }]
-};