PDA

View Full Version : [CLOSED] display PDF in TabPanel



idrissb
Sep 10, 2008, 2:13 PM
is it possible to display a PDF or Word Doc inside a TabPanel. I am trying to use an iframe inside a TabPanel but my PDF does not display. any suggestions.
thanks

mindcore1
Sep 10, 2008, 5:13 PM
Did you try an ext:FitLayout around your iFrame to stretch the contents to the borders of the TabPanel?


Also, a small snippet of code would be helpful.

idrissb
Sep 10, 2008, 5:36 PM
thank you. that is working. what is the purpose of
<ext:FitLayout>

geoffrey.mcgill
Sep 10, 2008, 5:47 PM
Hi idrissb,

If you set the .AutoLoad property with a url that starts with "http", an <iframe> will be automatically created inside the <Content> region and loaded with that url.

Example


<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Height="300" Width="800">
<Tabs>
<ext:Tab runat="server" Title="Tab 1" Html="Switch to Tab2" />
<ext:Tab
runat="server"
Title="Tab 2"
AutoLoad="http://ext.net/license/commercial/Coolite-Commercial-License-Agreement.pdf"
/>
</Tabs>
</ext:TabPanel>

Behind the scenes, the .AutoLoad property is just setting the .Html property with an <iframe>.

Example


this.Html = string.Format("<iframe width=\"100%\" id=\"{1}_iframe\" height=\"100%\" src=\"{0}\" frameborder=\"0\"></iframe>", (string)value, this.ClientID);

Hope this helps.

mindcore1
Sep 10, 2008, 6:58 PM
Thanks Geoffrey!

Learned something new.

idrissb
Sep 10, 2008, 7:02 PM
thank you for your help. it is working as intented on IE.
if I take the code you showed earlier
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Height="300" Width="800">
<Tabs>
<ext:Tab runat="server" Title="Tab 1" Html="Switch to Tab2" />
<ext:Tab
runat="server"
Title="Tab 2"
AutoLoad="http://ext.net/license/commercial/Coolite-Commercial-License-Agreement.pdf"
/>
</Tabs>
</ext:TabPanel>



on IE, If I switch to the other tab and then return to Tab1, the pdf is still display.
On FF3, Tab1 displays the PDF then select Tab2, go back to Tab1 no PDF displayed.
Am I missing something.
this is the center panel I am using just in case





<Center>

<ext:TabPanel ID="CenterPanel" runat="server" ActiveTab="0" ActiveTabIndex="0" >

<Tabs>

<ext:Tab ID="CenterTab1" runat="server" Title="Tab 2" AutoLoad="http://ext.net/license/commercial/Coolite-Commercial-License-Agreement.pdf" />



<ext:Tab ID="Tab1" runat="server" Title="Center" Border="false" BodyStyle="padding:6px;">

<Content>

<ext:FitLayout runat="server">

<ext:Panel ID="Panel3" runat="server" Height="450px" Title="Google" Width="600px"

Html="<iframe id='Panel3_IFrame' width='100%' height='100%' src='reports/mole.pdf' frameborder='0'></iframe>" />

</ext:FitLayout>

</Content>

</ext:Tab>

<ext:Tab ID="Tab4" runat="server" Title="Event Tab" Html="I am tab 3's content. I also have an event listener attached."

BodyStyle="padding: 6px;" AutoScroll="true">

<Listeners>

<Activate Handler="handleActivate" />

</Listeners>

</ext:Tab>

</Tabs>

</ext:TabPanel>

</Center>
</PRE>