X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/buttons.html
diff --git a/docs/source/buttons.html b/docs/source/buttons.html
new file mode 100644
index 00000000..dda71fa5
--- /dev/null
+++ b/docs/source/buttons.html
@@ -0,0 +1,187 @@
+
+
+ The source code
+
+
+
+
+ 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