-<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>
git.ithinksw.org / extjs.git / blobdiff