[CLOSED] Issue with autoLoadIFrame

[Rod]

Hello.
I'm sorry but i'm already stuck with this :(
I tried to update my samples I was adding tabs dynamically to use the new autoLoadIFrame, but I cant get it to work.

The following code effectively add a tab and set it active, but nothing is loaded. I simplified my code to post something really basic, but I dn't really get what I am missing.

foo.aspx is a basic page with some text, which loads correctly alone.

[CODE]
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server">
</ext:ScriptManager>

<ext:Button ID="Button1" runat="server" Text="Submit">
<Listeners>
<Click Handler="TabPanel1.add({title: 'foo',closable: true, autoLoadIFrame: '/foo.aspx'}).show();" />
</Listeners>
</ext:Button>
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Height="300">
<Tabs>
<ext:Tab runat="server" ID="Tab1" Title="Tab1">
</ext:Tab>
</Tabs>
</ext:TabPanel>


</form>
[CODE]

[geoffrey.mcgill]

Hi Rod,

The .AutoLoadIFrame property is a server-side only feature which just abstracts having to manually create the <iframe> html and setting the .Html property. The .AutoLoadIFrame property does not exist in the JavaScript API.

Given your code sample, you are best to set the "html" property of the config object with the html code required to create the iframe. The following sample demonstrates.

Example

<Click Handler="TabPanel1.add({title: 'foo',closable: true, html: '<iframe width=\"100%\" height=\"100%\" src=\"/foo.aspx\" frameborder=\"0\"></iframe>'}).show();" />

Hope this helps.

[geoffrey.mcgill]

oops... that code sample will not work. I'm making a new one.*

[Rod]

Haha, I was so sure you added it to the js api too :'(
Well thanks for your sample, but I had somehow the same as you already helped me about it.
That's a shame tho, is there any way this property can also be added to the js api?
I will stick with the .html for now anyway, ty.

edit : well nice " idd :p

[geoffrey.mcgill]

Here's a full code sample using a dedicated .addTab() function.

Example

<ext:TabPanel ID="TabPanel1" runat="server" Height="300">
    <Tabs>
        <ext:Tab ID="Tab1" runat="server" Title="Tab 1" Html="Tab 1" />
    </Tabs>
</ext:TabPanel>

<script type="text/javascript">
    var addTab = function(parent, path) {
        var tab = String.format("<iframe width='100%' height='100%' src='{0}' frameborder='0'></iframe>", path);
        parent.add({ title: 'foo', closable: true, html: tab }).show();
    }
</script>

<ext:Button ID="Button1" runat="server" Text="Add Tab">
    <Listeners>
        <Click Handler="addTab(#{TabPanel1}, '/foo.aspx');" />
    </Listeners>
</ext:Button>

Hope this helps.