Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / examples / layout / vbox.html
index 1b6545f..c8bdaa0 100644 (file)
-<html>\r
-<head>\r
-    <title>VBox Layout</title>\r
-    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.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
-\r
-    <style type="text/css">\r
-        html, body {\r
-            font: normal 12px verdana;\r
-            margin: 0;\r
-            padding: 0;\r
-            border: 0 none;\r
-        }\r
-    </style>\r
-    <script type="text/javascript">\r
-\r
-        Ext.onReady(function() {\r
-\r
-            var replace = function(config){\r
-                var btns = Ext.getCmp('btns');\r
-                btns.remove(0);\r
-                btns.add(config);\r
-\r
-                btns.doLayout();\r
-            }\r
-\r
-\r
-            var viewport = new Ext.Viewport({\r
-                layout:'border',\r
-\r
-                items: [{\r
-                    id:'btns',\r
-                    region:'west',\r
-                    baseCls:'x-plain',\r
-                    split:true,\r
-                    width:150,\r
-                    minWidth: 100,\r
-                    maxWidth: 250,\r
-                    layout:'fit',\r
-                    margins: '5 0 5 5',\r
-                    items: {\r
-                        baseCls: 'x-plain',\r
-                        html: '<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right &raquo;</p>'\r
-                    }\r
-               }, {\r
-                    region:'center',\r
-                    margins: '5 5 5 0',\r
-                    layout:{\r
-                        type:'vbox',\r
-                        align:'stretch'\r
-                    },\r
-                    items:[{\r
-                        baseCls:'x-plain',\r
-                        layout: {\r
-                            type:'hbox',\r
-                            padding: 10\r
-                        },\r
-                        defaults:{\r
-                            margins:'0 5 0 0',\r
-                            pressed: false,\r
-                            toggleGroup:'btns',\r
-                            allowDepress: false\r
-                        },\r
-                        items: [{\r
-                            xtype:'button',\r
-                            text: 'Spaced',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        align:'left'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1'\r
-                                    },{\r
-                                        xtype:'spacer',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4',\r
-                                        margins:'0'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Multi-Spaced',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        align:'left'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1'\r
-                                    },{\r
-                                        xtype:'spacer',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2'\r
-                                    },{\r
-                                        xtype:'spacer',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3'\r
-                                    },{\r
-                                        xtype:'spacer',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4',\r
-                                        margins:'0'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Align: top',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        align:'left'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Align: middle',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        align:'center'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Align: stretch',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        align:'stretch'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Align: stretchmax',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        align:'stretchmax'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        }]\r
-                    },{\r
-                        baseCls:'x-plain',\r
-                        layout: {\r
-                            type:'hbox',\r
-                            padding: '0 10 10'\r
-                        },\r
-                        defaults:{\r
-                            margins:'0 5 0 0',\r
-                            pressed: false,\r
-                            toggleGroup:'btns',\r
-                            allowDepress: false\r
-                        },\r
-                        items: [{\r
-                            xtype:'button',\r
-                            text: 'Flex: All even',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        align:'center'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4',\r
-                                        flex:1,\r
-                                        margins:'0'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Flex: Ratio',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        align:'center'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4',\r
-                                        flex:3,\r
-                                        margins:'0'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Flex + Stretch',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        align:'stretch'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3',\r
-                                        flex:1\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4',\r
-                                        flex:3,\r
-                                        margins:'0'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Pack: start',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        pack:'start',\r
-                                        align:'center'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Pack: center',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        pack:'center',\r
-                                        align:'center'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4',\r
-                                        margins:'0'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        },{\r
-                            xtype:'button',\r
-                            text: 'Pack: end',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layout: {\r
-                                        type:'vbox',\r
-                                        padding:'5',\r
-                                        pack:'end',\r
-                                        align:'center'\r
-                                    },\r
-                                    defaults:{margins:'0 0 5 0'},\r
-                                    items:[{\r
-                                        xtype:'button',\r
-                                        text: 'Button 1'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 2'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 3'\r
-                                    },{\r
-                                        xtype:'button',\r
-                                        text: 'Button 4',\r
-                                        margins:'0'\r
-                                    }]\r
-                                });\r
-                            }\r
-                        }]\r
-                    }]\r
-                }]\r
-            });\r
-        });\r
-    </script>\r
-</head>\r
-<body>\r
-</body>\r
-</html>\r
+<html>
+<head>
+    <title>VBox Layout</title>
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+    <link rel="stylesheet" type="text/css" href="../shared/example.css" />
+    <script type="text/javascript" src="../../bootstrap.js"></script>
+
+    <style type="text/css">
+        html, body {
+            font: normal 12px verdana;
+            margin: 0;
+            padding: 0;
+            border: 0 none;
+        }
+    </style>
+    <script type="text/javascript">
+        Ext.onReady(function() {
+            var currentName;
+            var replace = function(config, name) {
+                var btns = Ext.getCmp('btns');
+                if (name && name != currentName) {
+                    currentName = name;
+                    btns.remove(0);
+                    btns.add(Ext.apply(config));
+                }
+            };
+
+            var viewport = Ext.create('Ext.Viewport', {
+                layout:'border',
+
+                items: [{
+                    id:'btns',
+                    region:'west',
+                    baseCls:'x-plain',
+                    split:true,
+                    width:150,
+                    minWidth: 100,
+                    maxWidth: 250,
+                    layout:'fit',
+                    margins: '5 0 5 5',
+                    items: {
+                        baseCls: 'x-plain',
+                        html: '<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right &raquo;</p>'
+                    }
+               }, {
+                    region:'center',
+                    margins: '5 5 5 0',
+                    layout: 'anchor',
+                    items:[{
+                        anchor: '100%',
+                        baseCls:'x-plain',
+                        layout: {
+                            type:'hbox',
+                            padding: 10
+                        },
+                        defaults:{
+                            margins:'0 5 0 0',
+                            pressed: false,
+                            toggleGroup:'btns',
+                            allowDepress: false
+                        },
+                        items: [{
+                            xtype:'button',
+                            text: 'Spaced / Align: left',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        align:'left'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'tbspacer',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        margins:'0'
+                                    }]
+                                }, 'spaced');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Multi-Spaced / Align: left',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        align:'left'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'tbspacer',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'tbspacer',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'tbspacer',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        margins:'0'
+                                    }]
+                                }, 'multi spaced - align left');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Align: left',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        align:'left'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4'
+                                    }]
+                                }, 'align left');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Align: center',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        align:'center'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4'
+                                    }]
+                                }, 'align center');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Align: stretch',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        align:'stretch'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4'
+                                    }]
+                                }, 'align stretch');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Align: stretchmax',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        align:'stretchmax'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Jamie'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Aaron'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Tommy'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Ed '
+                                    }]
+                                }, 'align stretchmax');
+                            }
+                        }]
+                    },{
+                        anchor: '100%',
+                        baseCls:'x-plain',
+                        layout: {
+                            type:'hbox',
+                            padding: '0 10 10'
+                        },
+                        defaults:{
+                            margins:'0 5 0 0',
+                            pressed: false,
+                            toggleGroup:'btns',
+                            allowDepress: false
+                        },
+                        items: [{
+                            xtype:'button',
+                            text: 'Flex: Even / Align: center',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        align:'center'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        flex:1,
+                                        margins:'0'
+                                    }]
+                                }, 'align flex even');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Flex: Ratio / Align: center',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        align:'center'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        flex:3,
+                                        margins:'0'
+                                    }]
+                                }, 'align flex ratio');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Flex + Stretch',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        align:'stretch'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        flex:3,
+                                        margins:'0'
+                                    }]
+                                }, 'align flex + stretch');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Pack: start / Align: center',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        pack:'start',
+                                        align:'center'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4'
+                                    }]
+                                }, 'align pack start + align center');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Pack: center / Align: center',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        pack:'center',
+                                        align:'center'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        margins:'0'
+                                    }]
+                                }, 'align pack center + align center');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Pack: end / Align: center',
+                            handler: function(){
+                                replace({
+                                    layout: {
+                                        type:'vbox',
+                                        padding:'5',
+                                        pack:'end',
+                                        align:'center'
+                                    },
+                                    defaults:{margins:'0 0 5 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        margins:'0'
+                                    }]
+                                }, 'align pack end + align center');
+                            }
+                        }]
+                    }]
+                }]
+            });
+        });
+    </script>
+</head>
+<body>
+</body>
+</html>