Flex: Ratio (hbox layout) : HBox Layout « Ext JS « JavaScript DHTML






Flex: Ratio (hbox 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(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: 'Flex: Ratio',
                            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:3,
                                        margins:'0'
                                    }]
                                });
                            }
                        }]
                    }]
                }]
            });
        });
    </script>
        
</script>
</body>
</html>

   
    
  








Related examples in the same category

1.A Container with an HBox layout
2.hbox layout and pack = 'start'
3.HBox layout, align : 'middle'
4.A hbox layout
5.HBox layout, width and height
6.HBox layout, align : 'stretch'
7.HBox layout with three panels
8.Spaced hbox layout
9.Align top hbox layout
10.Align middle hbox layout
11.Align stretch hbox layout
12.Align: stretchmax hbox layout
13.Flex: All even (hbox layout)
14.Pack: start (hbox layout)
15.Pack: center (hbox layout)