Mix and match icon sizes to create a huge unusable toolbar : Toolbar « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. Toolbar

Mix and match icon sizes to create a huge unusable toolbar

  
<!--
/*!
 * 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',
            columns: 3,
            title: 'Clipboard',
            items: [{
                text: 'Paste',
                scale: 'large',
                rowspan: 3, iconCls: 'add',
                iconAlign: 'top',
                cls: 'x-btn-as-arrow'
            },{
                xtype:'splitbutton',
                text: 'Menu Button',
                scale: 'large',
                rowspan: 3,
                iconCls: 'add',
                iconAlign: 'top',
                arrowAlign:'bottom',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy', iconCls: 'add16'
            },{
                text: 'Format', iconCls: 'add16'
            }]
        },{
            xtype: 'buttongroup',
            columns: 3,
            title: 'Other Actions',
            items: [{
                text: 'Paste',
                scale: 'large',
                rowspan: 3, iconCls: 'add',
                iconAlign: 'top',
                cls: 'x-btn-as-arrow'
            },{
                xtype:'splitbutton',
                text: 'Menu Button',
                scale: 'large',
                rowspan: 3,
                iconCls: 'add',
                iconAlign: 'top',
                arrowAlign:'bottom',
                menu: [{text: 'Menu Button 1'}]
            },{
                xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy', iconCls: 'add16'
            },{
                text: 'Format', iconCls: 'add16'
            }]
        }],
    items    : makeChildren('Panel 1')
  });



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








Related examples in the same category

1.Create tool bar with two buttons
2.Add tool bar to window
3.Create Toolbar Fill
4.Button toolbar
5.Create Pre-defined mark to define tool bar
6.Add split buttons with icons to Toolbar
7.Add menu buttons with icon classes to a Toolbar
8.Add group to Toolbar(Office 2007 style)
9.Multi columns (No titles, double stack)
10.Add combobox to toolbar
11.Set toolbar height
12.Render Toolbar to document body
13.Add plain button to Toolbar
14.Add menu button to Toolbar
15.Add split button to Toolbar
16.Add separator to Toolbar
17.Align buttons all the way to the right
18.Add icon button to Toolbar
19.Set icon class for buttons in a Toolbar