Button group Demo : ButtonGroup « Ext JS « JavaScript DHTML






Button group Demo

  

<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() {
    new Ext.ButtonGroup({
        renderTo     : Ext.getBody(),   
    
        title        : 'Edit',
        //layout       : 'hbox',
        layoutConfig : {
          //  align : 'stretch'
        },
        defaults    : {
            flex : 1
        },
        items       : [
            {
                text       : 'Paste as',
                iconCls    : 'icon-clipboard',
                //arrowAlign : 'bottom',
                menu       : [
                    {
                        text    : 'Plain Text',
                    },
                    {
                        text    : 'Word',
                    }
                ]
            },
            {
                text    : 'Copy',
            },
            {
                text    : 'Cut',
            },
            {
                text    : 'Clear',
            }
        ]
    });
});



</script>
<body>


</body>
</html>

   
    
  








Related examples in the same category

1.Two column button group
2.hbox for ButtonGroup layout
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