Two column button group : ButtonGroup « Ext JS « JavaScript DHTML






Two column button group

  
<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    : 'Clipboard',
        columns  : 2,
        items    : [
            {
                text       : 'Paste',
                rowspan    : '3',
                width      : 50,
                scale      : 'large',
                arrowAlign : 'bottom',
                iconAlign  : 'top',
                menu       : [
                    {
                        text    : 'Plain Text',
                    },
                    {
                        text    : 'Word',
                    }
                ]
            },
            {
                text : 'icon-cut'
            },
            {
                text : 'icon-page_white_copy'
            },
            {
                text : 'icon-paintbrush'
            }
        ]
    });
});



</script>
<body>


</body>
</html>

   
    
  








Related examples in the same category

1.Button group Demo
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