Hello World Window
Ext.onReady(function() {
var replace = function(config){
var btns = Ext.getCmp('btns');
btns.remove(0);
btns.add(config);
btns.doLayout();
}
var viewport = new 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: 'Select a configuration to the right »'
}
}, {
region:'center',
margins: '5 5 5 0',
layout:{
type:'vbox',
align:'stretch'
},
items:[{
baseCls:'x-plain',
layout: {
type:'hbox',
padding: 10
},
defaults:{
margins:'0 5 0 0',
pressed: false,
toggleGroup:'btns',
allowDepress: false
},
items: [{
xtype:'button',
text: 'Align: top',
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'
}]
});
}
}]
}]
}]
});
});