X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/examples/button/buttons.js

diff --git a/examples/button/buttons.js b/examples/button/buttons.js
new file mode 100644
index 00000000..1e1b63e9
--- /dev/null
+++ b/examples/button/buttons.js
@@ -0,0 +1,184 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.onReady(function(){
+
+    // This function renders a block of buttons
+    function renderButtons(title){
+
+        Ext.getBody().createChild({tag: 'h2', html: title});
+
+        new ButtonPanel(
+            'Text Only',
+            [{
+                text: 'Add User'
+            },{
+                text: 'Add User',
+                scale: 'medium'
+            },{
+                text: 'Add User',
+                scale: 'large'
+            }]
+        );
+
+        new ButtonPanel(
+            'Icon Only',
+            [{
+                iconCls: 'add16'
+            },{
+                iconCls: 'add24',
+                scale: 'medium'
+            },{
+                iconCls: 'add',
+                scale: 'large'
+            }]
+        );
+
+        new ButtonPanel(
+            'Icon and Text (left)',
+            [{
+                text: 'Add User',
+                iconCls: 'add16'
+            },{
+                text: 'Add User',
+                iconCls: 'add24',
+                scale: 'medium'
+            },{
+                text: 'Add User',
+                iconCls: 'add',
+                scale: 'large'
+            }]
+        );
+
+        new ButtonPanel(
+            'Icon and Text (top)',
+            [{
+                text: 'Add User',
+                iconCls: 'add16',
+                iconAlign: 'top'
+            },{
+                text: 'Add User',
+                iconCls: 'add24',
+                scale: 'medium',
+                iconAlign: 'top'
+            },{
+                text: 'Add User',
+                iconCls: 'add',
+                scale: 'large',
+                iconAlign: 'top'
+            }]
+        );
+
+        new ButtonPanel(
+            'Icon and Text (right)',
+            [{
+                text: 'Add User',
+                iconCls: 'add16',
+                iconAlign: 'right'
+            },{
+                text: 'Add User',
+                iconCls: 'add24',
+                scale: 'medium',
+                iconAlign: 'right'
+            },{
+                text: 'Add User',
+                iconCls: 'add',
+                scale: 'large',
+                iconAlign: 'right'
+            }]
+        );
+
+        new ButtonPanel(
+            'Icon and Text (bottom)',
+            [{
+                text: 'Add User',
+                iconCls: 'add16',
+                iconAlign: 'bottom'
+            },{
+                text: 'Add User',
+                iconCls: 'add24',
+                scale: 'medium',
+                iconAlign: 'bottom'
+            },{
+                text: 'Add User',
+                iconCls: 'add',
+                scale: 'large',
+                iconAlign: 'bottom'
+            }]
+        );
+    }
+
+    renderButtons('Normal Buttons');
+
+    ButtonPanel.override({
+        enableToggle: true
+    });
+
+    renderButtons('Toggle Buttons');
+
+    ButtonPanel.override({
+        enableToggle : undefined,
+        menu : {items: [{text:'Menu Item 1'},{text:'Menu Item 2'},{text:'Menu Item 3'}]}
+    });
+
+    renderButtons('Menu Buttons');
+
+    ButtonPanel.override({
+        split: true,
+        defaultType: 'splitbutton'
+    });
+
+    renderButtons('Split Buttons');
+
+    ButtonPanel.override({
+        split: false,
+        defaultType: 'button',
+        arrowAlign: 'bottom'
+    });
+
+    renderButtons('Menu Buttons (Arrow on bottom)');
+
+    ButtonPanel.override({
+        split: true,
+        defaultType: 'splitbutton'
+    });
+
+    renderButtons('Split Buttons (Arrow on bottom)');
+});
+
+// Helper class for organizing the buttons
+ButtonPanel = Ext.extend(Ext.Panel, {
+    layout:'table',
+    defaultType: 'button',
+    baseCls: 'x-plain',
+    cls: 'btn-panel',
+    renderTo : 'docbody',
+    menu: undefined,
+    split: false,
+
+    layoutConfig: {
+        columns:3
+    },
+
+    constructor: function(desc, buttons){
+        // apply test configs
+        for(var i = 0, b; b = buttons[i]; i++){
+            b.menu = this.menu;
+            b.enableToggle = this.enableToggle;
+            b.split = this.split;
+            b.arrowAlign = this.arrowAlign;
+        }
+        var items = [{
+            xtype: 'box',
+            autoEl: {tag: 'h3', html: desc, style:"padding:15px 0 3px;"},
+            colspan: 3
+        }].concat(buttons);
+
+        ButtonPanel.superclass.constructor.call(this, {
+            items: items
+        });
+    }
+});
\ No newline at end of file