PDA

View Full Version : Load a document in center region



sanjshah
8 Apr 2008, 1:08 PM
Hi,

I've searched everywhere but cannot find an example of this.

I have a bar in the north region and several buttons, how do I add a handler to load a url in the 'center' region upon the click of each button?



<script type="text/javascript">
Ext.onReady(function(){

Ext.QuickTips.init();


Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
{
region:'south',
contentEl: 'south',
collapsible: false,
height: 0,
minSize: 0,
maxSize: 20,
title:'Footer Info',
margins:'0 0 0 0'
},
{
region:'north',
contentEl: 'north',
height: 65,
collapsible: false,
bbar:[{
text:'Add Users',
tooltip:'Add Users',
html: '<a href="viewusers.html"</a>'
}, '-', {
text:'Add Asset Types',
tooltip:'Create a new Asset',
html: '<a href="addasset"</a>',
handler: function(){
Ext.Msg.alert('Click','You clicked on "Action 2".');
}
},'-',{
text:'Display Current Status',
tooltip:'Status View',
html: '<a href="html2.html"</a>'
}]
}, {
region:'east',
contentEl: 'east',
collapsible: false,
title: 'Help Information',
split:true,
autoScroll:true,
width: 200,
minSize: 200,
maxSize: 200,
layout:'fit',
margins:'0 5 0 0'
},{
region:'west',
id:'west-panel',
contentEl: 'west',
title: 'Options',
split:true,
autoScroll:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: false,
margins:'0 0 0 5',
layout:'accordion'
},{
region:'center',
contentEl:'center',
layout:'fit',
title: 'Content Panel',
collapsible: false,
autoScroll:true
}
]
});

});
</script>

Thanks!

cerad
8 Apr 2008, 1:21 PM
Give the center region an id and then it's as simple as:
Ext.getCmp('center-region-id').load({ url: 'www.whatever'});

sanjshah
8 Apr 2008, 3:09 PM
Thanks all working now,

Quick question I have loaded a page (html with a form - traditional method) when this submits even though I specfiy center as the target frame it redirects to a new page i.e. not within the region - is there a way to specify the region?

Thanks!

catacaustic
8 Apr 2008, 3:13 PM
If you're doing that you'll need to set up an iframe in that region to load the form. As you've seen, the Ext regions aren't frames, they are just DOM elements in the main page.

sanjshah
9 Apr 2008, 1:32 PM
Thanks for helping for me,

I have added the iFrame but this still does not work:


<div id="west" class="ylayout-inactive-content">
</div>
<div id="north" class="ylayout-inactive-content"><img src="images/ReviewersStatus.png" name="sdsd" width="240" height="63" border="1" align="top" id="sdsd" />
</div>
<div id="center" class="center-panel"><iframe frameborder="0" marginwidth="0" name="centercontent" scrolling="auto" height='100%' id='center' width='100%' src='login.asp'></iframe></div>
<div id="east" class="ylayout-inactive-content help-panel"><span class="helpcoltext">Move your cursor over a field to view the online help.</span>
</div>
<div id="south" class="ylayout-inactive-content"></div>

I must still be missing something, the information (page) is displayed under the regions and cannot be seen except in the border thickness area.

Regards,

Sanj

sanjshah
11 Apr 2008, 8:51 AM
sorry - but could someone please help!