Align stretch hbox layout
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
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: '<p style="padding:10px;color:#556677;">Select a configuration below:</p>'
}
}, {
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: stretch',
handler: function(){
replace({
layoutConfig: {
padding:'5',
align:'stretch'
},
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'
}]
});
}
}]
}]
}]
});
});
</script>
</script>
</body>
</html>
Related examples in the same category