+++ /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