JavaScript DHTML/Ext JS/HBox Layout
Содержание
- 1 A Container with an HBox layout
- 2 A hbox layout
- 3 Align middle hbox layout
- 4 Align stretch hbox layout
- 5 Align: stretchmax hbox layout
- 6 Align top hbox layout
- 7 Flex: All even (hbox layout)
- 8 Flex: Ratio (hbox layout)
- 9 HBox layout, align : "middle"
- 10 HBox layout, align : "stretch"
- 11 hbox layout and pack = "start"
- 12 HBox layout, width and height
- 13 HBox layout with three panels
- 14 Pack: center (hbox layout)
- 15 Pack: start (hbox layout)
- 16 Spaced hbox layout
A Container with an HBox layout
<source lang="html4strict">
<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> <body> <script type="text/javascript"> Ext.onReady(function() {
new Ext.Window({
layout : "hbox",
height : 300,
width : 300,
title : "A Container with an HBox layout",
layoutConfig : {
pack : "start"
},
defaults : {
frame : true,
},
items : [
{
title : "Panel 1",
height : 100
},
{
title : "Panel 2",
height : 75,
width : 100
},
{
title : "Panel 3",
height : 200
}
]
}).show();
}); </script>
</body> </html>
</source>
A hbox layout
<source lang="html4strict">
<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> <body> <script type="text/javascript"> Ext.onReady(function() {
var myWin = new Ext.Window({
height : 300,
width : 300,
border : false,
autoScroll : true,
id : "myWin",
title : "A hbox layout",
layout : "hbox",
layoutConfig : {
align : "stretch"
},
defaults : {
frame : true
},
items : [
{
title : "Column 1",
html : "1",
id : "col1"
},
{
title : "Column 2",
html : "2",
},
{
title : "Col 3",
html : "",
width : 100
},
{
title : "Col 4",
frame : true
}
]
});
myWin.show();
}); </script>
</body> </html>
</source>
Align middle hbox layout
<source lang="html4strict">
<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>
<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: "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"
}]
});
}
}]
}]
}]
});
});
</script>
</script> </body> </html>
</source>
Align stretch hbox layout
<source lang="html4strict">
<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>
<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: "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: 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>
</source>
Align: stretchmax hbox layout
<source lang="html4strict">
<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>
<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: "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: 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"
}]
});
}
}]
}]
}]
});
});
</script>
</script> </body> </html>
</source>
Align top hbox layout
<source lang="html4strict">
<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>
<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: "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: 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"
}]
});
}
}]
}]
}]
});
});
</script>
</script> </body> </html>
</source>
Flex: All even (hbox layout)
<source lang="html4strict">
<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>
<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: "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: "Flex: All even",
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"
}]
});
}
}]
}]
}]
});
});
</script>
</script> </body> </html>
</source>
Flex: Ratio (hbox layout)
<source lang="html4strict">
<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>
<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: "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: "Flex: Ratio",
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:3,
margins:"0"
}]
});
}
}]
}]
}]
});
});
</script>
</script> </body> </html>
</source>
HBox layout, align : "middle"
<source lang="html4strict">
<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> <body> <script type="text/javascript"> Ext.onReady(function() {
new Ext.Window({
layout : "hbox",
height : 300,
width : 300,
title : "An HBox layout",
layoutConfig : {
pack : "center",
align : "middle"
},
defaults : {
frame : true,
},
items : [
{
title : "Panel 1",
},
{
title : "Panel 2",
},
{
title : "Panel 3",
},
]
}).show();
}); </script>
</body> </html>
</source>
HBox layout, align : "stretch"
<source lang="html4strict">
<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> <body> <script type="text/javascript"> Ext.onReady(function() {
new Ext.Window({
layout : "hbox",
height : 250,
width : 250,
title : "HBox layout",
layoutConfig : {
align : "stretch"
},
defaults : {
frame : true,
},
items : [
{
title : "Panel 1",
flex : 1
},
{
title : "Panel 2",
width : 100,
flex : 1
},
{
title : "Panel 3",
flex : 1
}
]
}).show();
}); </script>
</body> </html>
</source>
hbox layout and pack = "start"
<source lang="html4strict">
<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> <body> <script type="text/javascript"> Ext.onReady(function() {
new Ext.Window({
layout : "hbox",
height : 300,
width : 300,
title : "A Container with an HBox layout",
layoutConfig : {
pack : "start"
},
defaults : {
frame : true,
},
items : [
{
title : "Panel 1",
height : 100
},
{
title : "Panel 2",
height : 75,
width : 100
},
{
title : "Panel 3",
height : 200
}
]
}).show();
}); </script>
</body> </html>
</source>
HBox layout, width and height
<source lang="html4strict">
<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> <body> <script type="text/javascript"> Ext.onReady(function() {
new Ext.Window({
layout : "hbox",
height : 250,
width : 250,
title : "HBox layout",
layoutConfig : {
pack : "start",
align : "middle"
},
defaults : {
frame : true,
},
items : [
{
title : "Panel 1",
height : 100
},
{
title : "Panel 2",
height : 75,
width : 100
},
{
title : "Panel 3",
height : 200
}
]
}).show();
}); </script>
</body> </html>
</source>
HBox layout with three panels
<source lang="html4strict"> <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> <body> <script type="text/javascript"> Ext.onReady(function() {
new Ext.Window({
layout : "vbox",
height : 300,
width : 300,
title : "A Container with an HBox layout",
layoutConfig : {
pack : "start"
},
defaults : {
frame : true,
},
items : [
{
title : "Panel 1",
width : 100
},
{
title : "Panel 2",
width : 75,
height : 100
},
{
title : "Panel 3",
width : 200
}
]
}).show();
}); </script>
</body> </html>
</source>
Pack: center (hbox layout)
<source lang="html4strict">
<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>
<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: "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: "Pack: center",
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"
}]
});
}
}]
}]
}]
});
});
</script>
</script> </body> </html>
</source>
Pack: start (hbox layout)
<source lang="html4strict">
<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>
<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: "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: "Pack: start",
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"
}]
});
}
}]
}]
}]
});
});
</script>
</script> </body> </html>
</source>
Spaced hbox layout
<source lang="html4strict">
<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>
<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: "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: "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"
}]
});
}
}]
}]
}]
});
});
</script>
</script> </body> </html>
</source>
