PDA

View Full Version : Viewport and replacing center region with new form



douggiefox
10 Jul 2009, 5:51 AM
Hi

I'm having problems replacing regions in a viewport. What I'd like to happen is for the central region to get replaced with a different form depending on what's clicked in the west region.

I'm using Viewport with a border layout. Here's my basic definition:


<html>
<head>
<title>Getting started sample</title>
<link rel="stylesheet" type="text/css"
href="lib/extjs/resources/css/ext-all.css"/>
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout : 'border',
defaults : { // 1
frame : true,
split : true
},
items : [
{
title : 'North Panel', // 2
region : 'north',
height : 100,
minHeight : 100,
maxHeight : 150,
collapsible : true
},
{
title : 'South Panel', // 3
region : 'south',
height : 75,
split : false,
margins : {
top : 5
}
},
{
title : 'East Panel', // 4
region : 'east',
width : 100,
minWidth : 75,
maxWidth : 150,
collapsible : true
},
{
title : 'West Panel', // 5
region : 'west',
collapsible : true,
collapseMode : 'mini',
contentEl: 'west'
},
{
xtype : 'container',
region : 'center',
layout : 'fit',
id : 'centerRegion',
autoEl : {},
items : {
title : 'Center Region',
id : 'centerPanel',
html : 'I am disposable',
frame : true
}
}
]
});
});
</script>
</head>
<body>
<div id="west" class="x-hide-display">
<a href="formreplace.html">New form</a>
</div>
</body>
</html>
formreplace.html is defined as this:


<html>
<head>
<title>Getting started sample</title>
<link rel="stylesheet" type="text/css"
href="lib/extjs/resources/css/ext-all.css"/>
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
var centerPanel = Ext.getCmp('centerPanel');
var centerRegion = Ext.getCmp('centerRegion');
centerRegion.remove(centerPanel, true);
centerRegion.add({
xtype : 'form',
frame : true,
bodyStyle : 'padding: 5px',
defaultType : 'field',
title : 'Please enter some information',
defaults : {
anchor : '-10'
},
items : [
{
fieldLabel : 'First Name'
},
{
fieldLabel : 'Last Name'
},
{
xtype : 'textarea',
fieldLabel : 'Bio'
}
]
});
centerRegion.doLayout();});
</script>
</head>
<body>
<!-- Nothing-->
</body>
</html>

Any help's appreciated.

Best DF

jay@moduscreate.com
10 Jul 2009, 6:21 AM
You cant add/remove items from a viewport easily. you'll need to work on a facade container.

A visual demonstration of this can be found here: http://tdg-i.com/58/ext-js-screencast-005-containers-add-and-remove

TopKatz
10 Jul 2009, 6:39 AM
Also of note is that any borderlayout you can not add/remove a child region directly.

That is to say you can not swap out the north region for another panel designated region north. There are a couple of workarounds for this.

1. Use a child container in north that actualy holds the panel. This child can have its items manipulated.

2. Use a cardlayout panel as the child:

panel(layout:border) -> panel(region:north)->panel(layout:'card')->Panel1 || Panel2