JavaScript DHTML/Ext JS/VBox Layout — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 07:21, 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
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Align stretchmax vbox layout
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Align stretch vhox layout
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Align top vhox layout
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Flex: All even vbox layout
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Flex: Ratio (vbox layout)
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Flex + Stretch (vbox layout)
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Layout vbox, align : "stretch"
<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>
<div id="div1">asdf</div>
</body>
</html>
Multi-Spaced vbox layout
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Pack: center (vbox layout)
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Pack: end (vbox layout)
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Pack: start (vbox layout)
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>
Spaced vbox layout
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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(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: "<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>"
}
}, {
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>