Align middle vhox layout : VBox Layout « Ext JS « JavaScript DHTML





Align middle vhox layout

  

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>

<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
        Ext.onReady(function() {

            var replace = function(config){
                var btns = Ext.getCmp('btns');
                btns.remove(0);
                btns.add(config);

                btns.doLayout();
            }


            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 &raquo;</p>'
                    }
               }, {
                    region:'center',
                    margins: '5 5 5 0',
                    layout:{
                        type:'vbox',
                        align:'stretch'
                    },
                    items:[{
                        baseCls:'x-plain',
                        layout: {
                            type:'hbox',
                            padding: 10
                        },
                        defaults:{
                            margins:'0 5 0 0',
                            pressed: false,
                            toggleGroup:'btns',
                            allowDepress: false
                        },
                        items: [{
                            xtype:'button',
                            text: 'Align: middle',
                            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'
                                    }]
                                });
                            }
                        }]
                    }]
                }]
            });
        });

</script>
        
</script>
</body>
</html>

   
    
  










Related examples in the same category

1.Layout vbox, align : 'stretch'
2.Spaced vbox layout
3.Multi-Spaced vbox layout
4.Align top vhox layout
5.Align stretch vhox layout
6.Align stretchmax vbox layout
7.Flex: All even vbox layout
8.Flex: Ratio (vbox layout)
9.Flex + Stretch (vbox layout)
10.Pack: start (vbox layout)
11.Pack: center (vbox layout)
12.Pack: end (vbox layout)