ExtJS buttons

ExtJS中按钮的运用可谓是无处不在，比比皆是。这里总结了一些关于ExtJS中按钮的使用方法。

/*! * Ext JS Library 3.2.2 * Copyright(c) 2006-2010 Ext JS, Inc. * [e-mail] * 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 buttonsButtonPanel = 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 }); }});