Ext.onReady(function(){
    var currentName;
    var replace = function(config, name) {
      
        var btns = Ext.getCmp('btns');
        if (name && name != currentName) {
            currentName = name;
            btns.remove(0);
            btns.add(Ext.apply(config));
        }
    }
    
    var viewport = Ext.create('Ext.Viewport', {
        layout : 'border',
        items : [
            {
                id : 'btns',
                region : 'west',
                baseCls : 'x-plain',
                split : true,
                width : 150,
                minWidth : 100,
                maxWidth : 250,
                layout : 'fit',
                margins : '5 0 5 5',
                items : {
                    baseCls : 'x-plain',
                    html : '<p style="padding:10px;color:#556677;font-size:11px;">点击右边的按钮查看效果</p>'
                }
            },
            {
                region : 'center',
                margins : '5 5 5 0',
                layout : 'anchor',
                items : [
                    {
                        anchor : '100%',
                        baseCls : 'x-plain',
                        layout : {
                            type : 'hbox',
                            padding : 10
                        },
                        defaults : {
                            margins : '0 5 0 0',
                            prssed : false,
                            toogleGroup : 'btns',
                            allowDepress : false
                        },
                        items : [
                            {
                                xtype : 'button',
                                text : 'Spaced / Align: left',
                                handler : function() {
                                    replace({
                                        layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            align : 'left'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1'
                                            },
                                            {
                                                xtype : 'tbspacer',
                                                flex : 1
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4',
                                                margins : '0'
                                            }
                                        ]
                                    }, 'spaced');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Multi-Spaced / Align : left',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            align : 'left'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1'
                                            },
                                            {
                                                xtype : 'tbspacer',
                                                flex : 1
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4',
                                                margins : '0'
                                            }
                                        ]
                                        }, 'Multi spaced - align left');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Align : left',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            align : 'left'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4',
                                            }
                                        ]
                                        }, 'align left');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Align : Center',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            align : 'center'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4'
                                            }
                                        ]
                                        }, 'align center');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Align : Stretch',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            align : 'stretch'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4'
                                            }
                                        ]
                                        }, 'align stretch');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Align : Stretchmax',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            align : 'stretchmax'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Jamie1'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Aaron2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Tommy3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Ed4'
                                            }
                                        ]
                                        }, 'align stretchmax');
                                }
                            }
                        ]
                    },
                    {
                        anchor : '100%',
                        baseCls : 'x-plain',
                        layout : {
                            type : 'hbox',
                            padding : '0 10 10'
                        },
                        defaults : {
                            margins : '0 5 0 0',
                            pressed : false,
                            toggleGroup : 'btns',
                            allowDepress : false
                        },
                        items : [
                            {
                                xtype : 'button',
                                text : 'Flex : Even / Align : center',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            align : 'center'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4',
                                                margins : 0
                                            }
                                        ]
                                        }, 'align flex even');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Flex : Ratio / Align : center',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            align : 'center'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1',
                                                flex : 1
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2',
                                                flex : 1
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3',
                                                flex : 1
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4',
                                                margins : 0,
                                                flex : 3
                                            }
                                        ]
                                        }, 'align flex=3 ratio');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Flex + Ratio flex=1,last=3',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            align : 'stretch'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1',
                                                flex : 1
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2',
                                                flex : 1
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3',
                                                flex : 1
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4',
                                                margins : 0,
                                                flex : 3
                                            }
                                        ]
                                        }, 'align flex + stretch');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Paack : start / Align : center',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            pack : 'start',
                                            align : 'center'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4',
                                                margins : 0
                                            }
                                        ]
                                        }, 'align pack start + center');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Pack : center / Align : center',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            pack : 'center',
                                            align : 'center'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4',
                                                margins : 0
                                            }
                                        ]
                                        }, 'align pack center + center');
                                }
                            },
                            {
                                xtype : 'button',
                                text : 'Paack : end / Align : center',
                                handler : function() {
                                    replace(
                                        {
                                            layout : {
                                            type : 'vbox',
                                            padding : '5',
                                            pack : 'end',
                                            align : 'center'
                                        },
                                        defaults : {
                                            margins : '0 0 5 0'
                                        },
                                        items : [
                                            {
                                                xtype : 'button',
                                                text : 'Button 1'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 2'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 3'
                                            },
                                            {
                                                xtype : 'button',
                                                text : 'Button 4',
                                                margins : 0
                                            }
                                        ]
                                        }, 'align pack end + center');
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    });
});