--- /dev/null
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+
+ var SamplePanel = Ext.extend(Ext.Panel, {
+ width: 500,
+ height:250,
+ style: 'margin-top:15px',
+ bodyStyle: 'padding:10px',
+ renderTo: 'docbody',
+ html: Ext.example.shortBogusMarkup,
+ autoScroll: true
+ });
+
+ new SamplePanel({
+ title: 'Standard',
+ 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'
+ }]
+ });
+
+ new SamplePanel({
+ title: 'Multi columns',
+ tbar: [{
+ xtype: 'buttongroup',
+ title: 'Clipboard',
+ columns: 2,
+ defaults: {
+ scale: 'small'
+ },
+ items: [{
+ xtype:'splitbutton',
+ text: 'Menu Button',
+ iconCls: 'add16',
+ menu: [{text: 'Menu Item 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'
+ }]
+ },{
+ xtype: 'buttongroup',
+ title: 'Other Bugus Actions',
+ columns: 2,
+ defaults: {
+ scale: 'small'
+ },
+ items: [{
+ 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'
+ }]
+ }]
+ });
+
+
+
+ new SamplePanel({
+ title: 'Multi columns (No titles, double stack)',
+ tbar: [{
+ xtype: 'buttongroup',
+ columns: 3,
+ defaults: {
+ scale: 'small'
+ },
+ items: [{
+ xtype:'splitbutton',
+ text: 'Menu Button',
+ iconCls: 'add16',
+ menu: [{text: 'Menu Item 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'
+ }]
+ },{
+ xtype: 'buttongroup',
+ columns: 3,
+ defaults: {
+ scale: 'small'
+ },
+ items: [{
+ xtype:'splitbutton',
+ text: 'Menu Button',
+ iconCls: 'add16',
+ menu: [{text: 'Menu Item 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'
+ }]
+ }]
+ });
+
+ new SamplePanel({
+ title: 'Mix and match icon sizes to create a huge unusable toolbar',
+ 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'
+ }]
+ }]
+ });
+
+ new SamplePanel({
+ title: 'Medium icons, arrows to the bottom',
+ tbar: [{
+ xtype: 'buttongroup',
+ title: 'Clipboard',
+ defaults: {
+ scale: 'medium',
+ iconAlign:'top'
+ },
+ items: [{
+ xtype:'splitbutton',
+ text: 'Menu Button',
+ iconCls: 'add24',
+ arrowAlign:'bottom',
+ menu: [{text: 'Menu Item 1'}]
+ },{
+ xtype:'splitbutton',
+ text: 'Cut',
+ iconCls: 'add24',
+ arrowAlign:'bottom',
+ menu: [{text: 'Cut Menu Item'}]
+ },{
+ text: 'Copy',
+ iconCls: 'add24',
+ cls: 'x-btn-as-arrow'
+ },{
+ text: 'Paste',
+ iconCls: 'add24',
+ arrowAlign:'bottom',
+ menu: [{text: 'Paste Menu Item'}]
+ },{
+ text: 'Format<br/>Stuff',
+ iconCls: 'add24'
+ }]
+ },{
+ xtype: 'buttongroup',
+ title: 'Other Bogus Actions',
+ defaults: {
+ scale: 'medium',
+ iconAlign:'top'
+ },
+ items: [{
+ xtype:'splitbutton',
+ text: 'Menu Button',
+ iconCls: 'add24',
+ arrowAlign:'bottom',
+ menu: [{text: 'Menu Item 1'}]
+ },{
+ xtype:'splitbutton',
+ text: 'Cut',
+ iconCls: 'add24',
+ arrowAlign:'bottom',
+ menu: [{text: 'Cut Menu Item'}]
+ },{
+ text: 'Copy',
+ iconCls: 'add24',
+ cls: 'x-btn-as-arrow'
+ },{
+ text: 'Paste',
+ iconCls: 'add24',
+ arrowAlign:'bottom',
+ menu: [{text: 'Paste Menu Item'}]
+ },{
+ text: 'Format',
+ iconCls: 'add24',
+ cls: 'x-btn-as-arrow'
+ }]
+ }]
+ });
+
+
+ new SamplePanel({
+ title: 'Medium icons, text and arrows to the left',
+ tbar: [{
+ xtype:'buttongroup',
+ items: [{
+ text: 'Cut',
+ iconCls: 'add24',
+ scale: 'medium'
+ },{
+ text: 'Copy',
+ iconCls: 'add24',
+ scale: 'medium'
+ },{
+ text: 'Paste',
+ iconCls: 'add24',
+ scale: 'medium',
+ menu: [{text: 'Paste Menu Item'}]
+ }]
+ }, {
+ xtype:'buttongroup',
+ items: [{
+ text: 'Format',
+ iconCls: 'add24',
+ scale: 'medium'
+ }]
+ }]
+ });
+
+ new SamplePanel({
+ title: 'Small icons, text and arrows to the left',
+ 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'
+ }]
+ }]
+ });
+
+});
\ No newline at end of file