Small icons, text and arrows to the left : ButtonGroup « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. ButtonGroup

Small icons, text and arrows to the left

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->

<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>
<body>
<script type="text/javascript">
function makeChildren(ownerTitle) {
  return nestedChildItems =  [
    {
      xtype : 'panel',
      title : 'Child Panel 1',
      html  : 'Panels can contain Children',
      frame : true
    }
  ];

}
Ext.onReady(function() {
  new Ext.Panel({
    renderTo : Ext.getBody(),
    title    : 'Panel 1',
    width    : 800,
    height   : 180,
        tbar: [{
            xtype:'buttongroup',
            items: [{
                text: 'Cut',
                iconCls: 'add16',
                scale: 'small'
            },{
                text: 'Copy',
                iconCls: 'add16',
                scale: 'small'
            },{
                text: 'Paste',
                iconCls: 'add16',
                scale: 'small',
                menu: [{text: 'Paste Menu Item'}]
            }]
        }, {
            xtype:'buttongroup',
            items: [{
                text: 'Format',
                iconCls: 'add16',
                scale: 'small'
            }]
        }],
    items    : makeChildren('Panel 1')
  });



}); 
</script>
</body>
</html>








Related examples in the same category

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