-<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 »</p>'\r
- }\r
- }, {\r
- region:'center',\r
- margins: '5 5 5 0',\r
- layout: 'anchor',\r
- items:[{\r
- anchor: '100%',\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
- anchor: '100%',\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"/>
+
+ <!-- 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(config);
+ };
+
+ // console.profile();
+
+ btns.doLayout();
+ // console.profileEnd();
+ }
+
+
+ var viewport = new 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 »</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:'spacer',
+ 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:'spacer',
+ flex:1
+ },{
+ xtype:'button',
+ text: 'Button 2'
+ },{
+ xtype:'spacer',
+ flex:1
+ },{
+ xtype:'button',
+ text: 'Button 3'
+ },{
+ xtype:'spacer',
+ 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: '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: {
+ 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>
git.ithinksw.org / extjs.git / blobdiff