hbox for ButtonGroup layout : ButtonGroup « Ext JS « JavaScript DHTML






hbox for ButtonGroup layout

  
<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>
<script type="text/javascript">

Ext.onReady(function() {
    var userCrudBtns = [
        {
            xtype      : 'splitbutton',
            text       : 'New',
            iconCls    : 'icon-user_add',
            menu       : [
                {
                    text    : 'A',
                },
                {
                    text    : 'B',
                },
                {
                    text    : 'C',
                }
            ]
        },
        {
            text    : 'Edit',
        },
        {
            text    : 'Delete',
        }
    ];
     new Ext.ButtonGroup({
        renderTo     : Ext.getBody(),
        height       : 75,
        width        : 200,
        title        : 'Manage Users',
        //layout       : 'hbox',
        layoutConfig : {
          //  align : 'stretch'
        },
         defaults    : {
             flex : 1
         },
        items       : userCrudBtns
    });
});



</script>
<body>


</body>
</html>

   
    
  








Related examples in the same category

1.Button group Demo
2.Two column button group
3.Medium icons, arrows to the bottom
4.Medium icons, text and arrows to the left
5.Small icons, text and arrows to the left
6.Buttons overflow