Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / examples / layout / hbox.html
index 463a4a8..8e6a9f6 100644 (file)
-<html>\r
-<head>\r
-    <title>HBox 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
-\r
-                btns.remove(0);\r
-\r
-                btns.add(Ext.apply(config, {\r
-                    layout:'hbox'\r
-                }));\r
-\r
-                btns.doLayout();\r
-            }\r
-\r
-\r
-            var viewport = new Ext.Viewport({\r
-                layout:'border',\r
-\r
-                items: [{\r
-                    id:'btns',\r
-                    region:'north',\r
-                    baseCls:'x-plain',\r
-                    split:true,\r
-                    height:50,\r
-                    minHeight: 40,\r
-                    maxHeight: 85,\r
-                    layout:'fit',\r
-                    margins: '5 5 0 5',\r
-                    items: {\r
-                        baseCls: 'x-plain',\r
-                        html: '<p style="padding:10px;color:#556677;">Select a configuration below:</p>'\r
-                    }\r
-               }, {\r
-                    region:'center',\r
-                    margins: '0 5 5 5',\r
-                    layout:'anchor',\r
-\r
-                    items:[{\r
-                        anchor:'100%',\r
-                        baseCls:'x-plain',\r
-                        layout:'hbox',\r
-                        layoutConfig: {\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
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        align:'top'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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: 'Align: top',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        align:'top'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        align:'middle'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        align:'stretch'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        align:'stretchmax'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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
-                        anchor:'100%',\r
-                        baseCls:'x-plain',\r
-                        layout:'hbox',\r
-                        layoutConfig: {\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 / Align: middle',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        align:'middle'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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 / Align: top',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        align:'top'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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 / Align: middle',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        pack:'start',\r
-                                        align:'middle'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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 / Align: middle',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        pack:'center',\r
-                                        align:'middle'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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 / Align: middle',\r
-                            handler: function(){\r
-                                replace({\r
-                                    layoutConfig: {\r
-                                        padding:'5',\r
-                                        pack:'end',\r
-                                        align:'middle'\r
-                                    },\r
-                                    defaults:{margins:'0 5 0 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>HBox Layout</title>
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
+
+    <!-- GC -->
+    <!-- LIBS -->
+    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
+    <!-- ENDLIBS -->
+
+    <script type="text/javascript" src="../../ext-all.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, {
+                      layout:'hbox'
+                  }));
+              };
+              
+              btns.doLayout();
+            }
+
+
+            var viewport = new Ext.Viewport({
+                layout:'border',
+
+                items: [{
+                    id:'btns',
+                    region:'north',
+                    baseCls:'x-plain',
+                    split:true,
+                    height:50,
+                    minHeight: 40,
+                    maxHeight: 85,
+                    layout:'fit',
+                    margins: '5 5 0 5',
+                    items: {
+                        baseCls: 'x-plain',
+                        html: '<p style="padding:10px;color:#556677;">Select a configuration below:</p>'
+                    }
+               }, {
+                    region:'center',
+                    margins: '0 5 5 5',
+                    layout:'anchor',
+
+                    items:[{
+                        anchor:'100%',
+                        baseCls:'x-plain',
+                        layout:'hbox',
+                        layoutConfig: {
+                            padding: 10
+                        },
+                        defaults:{
+                            margins:'0 5 0 0',
+                            pressed: false,
+                            toggleGroup:'btns',
+                            allowDepress: false
+                        },
+                        items: [{
+                            xtype:'button',
+                            text: 'Spaced',
+                            handler: function(){
+                                replace({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        align:'top'
+                                    },
+                                    defaults:{margins:'0 5 0 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'spacer',
+                                        flex:1
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        margins:'0'
+                                    }]
+                                }, 'spaced');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Align: top',
+                            handler: function(){
+                                replace({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        align:'top'
+                                    },
+                                    defaults:{margins:'0 5 0 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4'
+                                    }]
+                                }, 'align top');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Align: middle',
+                            handler: function(){
+                                replace({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        align:'middle'
+                                    },
+                                    defaults:{margins:'0 5 0 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4'
+                                    }]
+                                }, 'align middle');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Align: stretch',
+                            handler: function(){
+                                replace({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        align:'stretch'
+                                    },
+                                    defaults:{margins:'0 5 0 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({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        align:'stretchmax'
+                                    },
+                                    defaults:{margins:'0 5 0 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4'
+                                    }]
+                                }, 'align stretchmax');
+                            }
+                        }]
+                    },{
+                        anchor:'100%',
+                        baseCls:'x-plain',
+                        layout:'hbox',
+                        layoutConfig: {
+                            padding: '0 10 10'
+                        },
+                        defaults:{
+                            margins:'0 5 0 0',
+                            pressed: false,
+                            toggleGroup:'btns',
+                            allowDepress: false
+                        },
+                        items: [{
+                            xtype:'button',
+                            text: 'Flex: All even / Align: middle',
+                            handler: function(){
+                                replace({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        align:'middle'
+                                    },
+                                    defaults:{margins:'0 5 0 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'
+                                    }]
+                                }, 'flex all even');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Flex: Ratio / Align: top',
+                            handler: function(){
+                                replace({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        align:'top'
+                                    },
+                                    defaults:{margins:'0 5 0 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'
+                                    }]
+                                }, 'flex ratio');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Pack: start / Align: middle',
+                            handler: function(){
+                                replace({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        pack:'start',
+                                        align:'middle'
+                                    },
+                                    defaults:{margins:'0 5 0 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4'
+                                    }]
+                                }, 'pack start');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Pack: center / Align: middle',
+                            handler: function(){
+                                replace({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        pack:'center',
+                                        align:'middle'
+                                    },
+                                    defaults:{margins:'0 5 0 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        margins:'0'
+                                    }]
+                                }, 'pack center');
+                            }
+                        },{
+                            xtype:'button',
+                            text: 'Pack: end / Align: middle',
+                            handler: function(){
+                                replace({
+                                    layoutConfig: {
+                                        padding:'5',
+                                        pack:'end',
+                                        align:'middle'
+                                    },
+                                    defaults:{margins:'0 5 0 0'},
+                                    items:[{
+                                        xtype:'button',
+                                        text: 'Button 1'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 2'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 3'
+                                    },{
+                                        xtype:'button',
+                                        text: 'Button 4',
+                                        margins:'0'
+                                    }]
+                                }, 'pack end');
+                            }
+                        }]
+                    }]
+                }]
+            });
+        });
+    </script>
+</head>
+<body>
+</body>
+</html>