PDA

View Full Version : AutoLoad the html page in Ext.window.Window



nil5286
3 May 2012, 6:34 AM
I am using extjs4.1 and asp.net mvc3.
I am trying to load an "ChildHTMLPage.htm" html page which has Viewport in it using the autoLoad property of Window which is in page "MainWindow.aspx". Below is my code.

ChildHTMLPage.htm


<script type="text/javascript" src="Scripts/ext/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
//renderTo: Ext.getCmp("win1"),
layout: 'border',
defaults: {
frame: true,
split: true
},
items: [
{
title: 'North Panel',
region: 'north',
height: 150,
minHeight: 120,
maxHeight: 150,
split: true,
collapsible: true
},
{
title: 'South Panel',
region: 'south',
height: 75,
split: false,
margins: {
top: 5
}
},
{
title: 'East Panel',
region: 'east',
width: 100,
minWidth: 75,
maxWidth: 150,
collapsible: true
},
{
title: 'West Panel',
region: 'west',
collapsible: true,
collapseMode: 'mini'
},
{
title: 'Center Region',
id: 'centerPanel',
html: 'Disposable',
region: 'center',
frame: true
}
]
});
});
</script>

MainWindow.aspx


<script type="text/javascript">

Ext.Loader.setConfig({ enabled: true });

Ext.onReady(function () {
Ext.create('Ext.window.Window', {
id: 'win1',
renderTo: Ext.getBody(),
autoLoad: {
url: "../ChildHTMLPage.htm",
method : "GET",
params: {
firstName: "Shuman",
lastName: "Human"
}
},
scripts:true,
resizable:false,
height: 300,
width: 600
}).show()
});
</script>

I just tried to refer the below link:
http://www.sencha.com/forum/showthread.php?102514-quot-autoLoad-quot-issue-in-Panel-component

Firstly in the docs i couldn't see the autoLoad property in window or panel as window extends panel : http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.Window
(http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.Window)
I also tried to put the renderTo: Ext.getCmp("win1") tag in the ViewPort but still doesn't work.
The Html tab in firebug for the "ChildHTMLPage.htm" page is blank and the response tab has the extjs code in it.
34833

I don't know if i am missing something. Any help is appreciated.

evant
3 May 2012, 8:35 PM
Check out the component-loader folder in the examples folder, it shows how you can load components into a container from a remote source.