--- /dev/null
+<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',\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',\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:3,\r
+ margins:'0'\r
+ }]\r
+ });\r
+ }\r
+ },{\r
+ xtype:'button',\r
+ text: 'Pack: start',\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',\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',\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
git.ithinksw.org / extjs.git / blobdiff