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
       
});
   
}
});