Ext JS JavaScript DHTML




Hello World Window







        Ext.onReady(function() {
            var replace = function(config){
                var btns = Ext.getCmp('btns');
                btns.remove(0);
                btns.add(Ext.apply(config, {
                    layout:'hbox'
                }));
                btns.doLayout();
            }
            var viewport = new Ext.Viewport({
                layout:'border',
                items: [{
                    id:'btns',
                    region:'north',
                    baseCls:'x-plain',
                    split:true,
                    height:50,
                    minHeight: 40,
                    maxHeight: 85,
                    layout:'fit',
                    margins: '5 5 0 5',
                    items: {
                        baseCls: 'x-plain',
                        html: 'Select a configuration below:

'
                    }
               }, {
                    region:'center',
                    margins: '0 5 5 5',
                    layout:'anchor',
                    items:[{
                        anchor:'100%',
                        baseCls:'x-plain',
                        layout:'hbox',
                        layoutConfig: {
                            padding: 10
                        },
                        defaults:{
                            margins:'0 5 0 0',
                            pressed: false,
                            toggleGroup:'btns',
                            allowDepress: false
                        },
                        items: [{
                            xtype:'button',
                            text: 'Align: middle',
                            handler: function(){
                                replace({
                                    layoutConfig: {
                                        padding:'5',
                                        align:'middle'
                                    },
                                    defaults:{margins:'0 5 0 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1'
                                    },{
                                        xtype:'button',
                                        text: 'Button 2'
                                    },{
                                        xtype:'button',
                                        text: 'Button 3'
                                    },{
                                        xtype:'button',
                                        text: 'Button 4'
                                    }]
                                });
                            }
                        }]
                    }]
                }]
            });
        });