Mega Code Archive

 
Categories / JavaScript DHTML / Ext JS
 

Add menu buttons with icon classes to a 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    : 400,     height   : 180,     tbar: [{             xtype:'splitbutton',             text: 'Menu Button',             iconCls: 'add16',             menu: [{text: 'Menu Button 1'}]         },'-',{             xtype:'splitbutton',             text: 'Cut',             iconCls: 'add16',             menu: [{text: 'Cut Menu Item'}]         },{             text: 'Copy',             iconCls: 'add16'         },{             text: 'Paste',             iconCls: 'add16',             menu: [{text: 'Paste Menu Item'}]         },'-',{             text: 'Format',             iconCls: 'add16'         }],     items    : makeChildren('Panel 1')   }); });  </script> </body> </html>