JavaScript DHTML/Ext JS/VBox Layout — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:59, 26 мая 2010
Содержание
- 1 Align middle vhox layout
- 2 Align stretchmax vbox layout
- 3 Align stretch vhox layout
- 4 Align top vhox layout
- 5 Flex: All even vbox layout
- 6 Flex: Ratio (vbox layout)
- 7 Flex + Stretch (vbox layout)
- 8 Layout vbox, align : "stretch"
- 9 Multi-Spaced vbox layout
- 10 Pack: center (vbox layout)
- 11 Pack: end (vbox layout)
- 12 Pack: start (vbox layout)
- 13 Spaced vbox layout
Align middle vhox 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(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: middle", handler: function(){ replace({ layout: { type:"vbox", padding:"5", align:"center" }, 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" }] }); } }] }] }] }); });
</script>
</script> </body> </html>
</source>
Align stretchmax vbox 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(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: stretchmax", handler: function(){ replace({ layout: { type:"vbox", padding:"5", align:"stretchmax" }, 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" }] }); } }] }] }] }); });
</script>
</script> </body> </html>
</source>
Align stretch vhox 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(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: stretch", handler: function(){ replace({ layout: { type:"vbox", padding:"5", align:"stretch" }, 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" }] }); } }] }] }] }); });
</script>
</script> </body> </html>
</source>
Align top vhox 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(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" }] }); } }] }] }] }); });
</script>
</script> </body> </html>
</source>
Flex: All even vbox 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(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: "Flex: All even", handler: function(){ replace({ layout: { type:"vbox", padding:"5", align:"center" }, defaults:{margins:"0 0 5 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 (vbox 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(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: "Flex: Ratio", handler: function(){ replace({ layout: { type:"vbox", padding:"5", align:"center" }, defaults:{margins:"0 0 5 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>
Flex + Stretch (vbox 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(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: "Flex + Stretch", handler: function(){ replace({ layout: { type:"vbox", padding:"5", align:"stretch" }, defaults:{margins:"0 0 5 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>
Layout vbox, 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 : "vbox", height : 500, width : 500, layoutConfig : { align : "stretch" }, defaults : { frame : true }, items : [ { title : "Panel 1", flex : 1 }, { title : "Panel 2", flex : 1 }, { title : "Panel 3", flex : 1 }, ] }).show();
}); </script>
</body> </html>
</source>
Multi-Spaced vbox 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(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: "Multi-Spaced", handler: function(){ replace({ layout: { type:"vbox", padding:"5", align:"left" }, defaults:{margins:"0 0 5 0"}, items:[{ xtype:"button", text: "Button 1" },{ xtype:"spacer", flex:1 },{ xtype:"button", text: "Button 2" },{ xtype:"spacer", flex:1 },{ xtype:"button", text: "Button 3" },{ xtype:"spacer", flex:1 },{ xtype:"button", text: "Button 4", margins:"0" }] }); } }] }] }] }); });
</script>
</script> </body> </html>
</source>
Pack: center (vbox 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(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: "Pack: center", handler: function(){ replace({ layout: { type:"vbox", padding:"5", pack:"center", align:"center" }, 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", margins:"0" }] }); } }] }] }] }); });
</script>
</script> </body> </html>
</source>
Pack: end (vbox 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(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: "Pack: end", handler: function(){ replace({ layout: { type:"vbox", padding:"5", pack:"end", align:"center" }, 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", margins:"0" }] }); } }] }] }] }); });
</script>
</script> </body> </html>
</source>
Pack: start (vbox 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(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: "Pack: start", handler: function(){ replace({ layout: { type:"vbox", padding:"5", pack:"start", align:"center" }, 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" }] }); } }] }] }] }); });
</script>
</script> </body> </html>
</source>
Spaced vbox 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(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: "Spaced", handler: function(){ replace({ layout: { type:"vbox", padding:"5", align:"left" }, defaults:{margins:"0 0 5 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>