371 lines
16 KiB
HTML
371 lines
16 KiB
HTML
<html>
|
|
<head>
|
|
<title>HBox Layout</title>
|
|
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
|
|
|
|
<!-- GC -->
|
|
<!-- LIBS -->
|
|
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
|
|
<!-- ENDLIBS -->
|
|
|
|
<script type="text/javascript" src="../../ext-all.js"></script>
|
|
|
|
<style type="text/css">
|
|
html, body {
|
|
font: normal 12px verdana;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0 none;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
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, {
|
|
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: 'Spaced',
|
|
handler: function(){
|
|
replace({
|
|
layoutConfig: {
|
|
padding:'5',
|
|
align:'top'
|
|
},
|
|
defaults:{margins:'0 5 0 0'},
|
|
items:[{
|
|
xtype:'button',
|
|
text: 'Button 1'
|
|
},{
|
|
xtype:'spacer',
|
|
flex:1
|
|
},{
|
|
xtype:'button',
|
|
text: 'Button 2'
|
|
},{
|
|
xtype:'button',
|
|
text: 'Button 3'
|
|
},{
|
|
xtype:'button',
|
|
text: 'Button 4',
|
|
margins:'0'
|
|
}]
|
|
}, 'spaced');
|
|
}
|
|
},{
|
|
xtype:'button',
|
|
text: 'Align: top',
|
|
handler: function(){
|
|
replace({
|
|
layoutConfig: {
|
|
padding:'5',
|
|
align:'top'
|
|
},
|
|
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'
|
|
}]
|
|
}, 'align top');
|
|
}
|
|
},{
|
|
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'
|
|
}]
|
|
}, 'align middle');
|
|
}
|
|
},{
|
|
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'
|
|
}]
|
|
}, 'align stretch');
|
|
}
|
|
},{
|
|
xtype:'button',
|
|
text: 'Align: stretchmax',
|
|
handler: function(){
|
|
replace({
|
|
layoutConfig: {
|
|
padding:'5',
|
|
align:'stretchmax'
|
|
},
|
|
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'
|
|
}]
|
|
}, 'align stretchmax');
|
|
}
|
|
}]
|
|
},{
|
|
anchor:'100%',
|
|
baseCls:'x-plain',
|
|
layout:'hbox',
|
|
layoutConfig: {
|
|
padding: '0 10 10'
|
|
},
|
|
defaults:{
|
|
margins:'0 5 0 0',
|
|
pressed: false,
|
|
toggleGroup:'btns',
|
|
allowDepress: false
|
|
},
|
|
items: [{
|
|
xtype:'button',
|
|
text: 'Flex: All even / Align: middle',
|
|
handler: function(){
|
|
replace({
|
|
layoutConfig: {
|
|
padding:'5',
|
|
align:'middle'
|
|
},
|
|
defaults:{margins:'0 5 0 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',
|
|
flex:1,
|
|
margins:'0'
|
|
}]
|
|
}, 'flex all even');
|
|
}
|
|
},{
|
|
xtype:'button',
|
|
text: 'Flex: Ratio / Align: top',
|
|
handler: function(){
|
|
replace({
|
|
layoutConfig: {
|
|
padding:'5',
|
|
align:'top'
|
|
},
|
|
defaults:{margins:'0 5 0 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',
|
|
flex:3,
|
|
margins:'0'
|
|
}]
|
|
}, 'flex ratio');
|
|
}
|
|
},{
|
|
xtype:'button',
|
|
text: 'Pack: start / Align: middle',
|
|
handler: function(){
|
|
replace({
|
|
layoutConfig: {
|
|
padding:'5',
|
|
pack:'start',
|
|
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'
|
|
}]
|
|
}, 'pack start');
|
|
}
|
|
},{
|
|
xtype:'button',
|
|
text: 'Pack: center / Align: middle',
|
|
handler: function(){
|
|
replace({
|
|
layoutConfig: {
|
|
padding:'5',
|
|
pack:'center',
|
|
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',
|
|
margins:'0'
|
|
}]
|
|
}, 'pack center');
|
|
}
|
|
},{
|
|
xtype:'button',
|
|
text: 'Pack: end / Align: middle',
|
|
handler: function(){
|
|
replace({
|
|
layoutConfig: {
|
|
padding:'5',
|
|
pack:'end',
|
|
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',
|
|
margins:'0'
|
|
}]
|
|
}, 'pack end');
|
|
}
|
|
}]
|
|
}]
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
</html>
|