--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">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
+ });
+ }
+});</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff