[CLOSED] sample for Nav Panel href to update center panel

  1. #1

    [CLOSED] sample for Nav Panel href to update center panel

    Geoff

    do you have a sample code for the following. I have a west and center region. in the West Region, accordion display links. when you click a link, i would like to create a new tab with a close button and then display an aspx page or some html. i can use an iframe in the tab.
    can you help.
    thanks
  2. #2

    RE: [CLOSED] sample for Nav Panel href to update center panel

    Hi idrissb,

    Please see below example
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Coolite Example</title>    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server">   
            </ext:ScriptManager>
            
            <script type="text/javascript">
                function hlClick(title, url) {
                    var cntrTabPanel = <%= this.CenterTabPanel.ClientID %>;
                    var html = String.format("<iframe width=\"100%\" id=\"Center_iframe\" height=\"100%\" src=\"{0}\" frameborder=\"0\"></iframe>", url);
                    
                    var tab = new Ext.Panel({
                        title: title,
                        html: html,
                        closable:true 
                      });
                      
                    cntrTabPanel.add(tab);
                    cntrTabPanel.setActiveTab(tab);
                }
            </script>
            
            <ext:ViewPort ID="ViewPort1" runat="server">
                <Content>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <West Collapsible="true" Split="true">
                            <ext:Panel ID="West" runat="server" Title="Navigation" Width="175" Icon="PageFind">
                                <Content>
                                    <ext:Accordion ID="Categories" runat="server" Animate="true">
                                        <ext:Panel runat="server" Title="Panel1" BodyStyle="padding:6px;">
                                            <Content>
                                                <asp:HyperLink ID="HyperLink1" NavigateUrl="hlClick('Google','http://www.google.com');" runat="server">Google</asp:HyperLink><br/><br/>
                                                <asp:HyperLink ID="HyperLink2" NavigateUrl="hlClick('ExtJS examples','http://extjs.com/deploy/dev/examples/samples.html');" runat="server">ExtJS examples</asp:HyperLink><br/><br/>
                                                <asp:HyperLink ID="HyperLink3" NavigateUrl="hlClick('Ext.NET','http://forums.ext.net/');" runat="server">Ext.NET forums</asp:HyperLink><br/>
                                            </Content>
                                        </ext:Panel>
                                         <ext:Panel runat="server" Title="Panel2">
                                            <Content>
                                                <asp:HyperLink ID="HyperLink4" runat="server">HyperLink</asp:HyperLink><br/>
                                                <asp:HyperLink ID="HyperLink5" runat="server">HyperLink</asp:HyperLink><br/>
                                                <asp:HyperLink ID="HyperLink6" runat="server">HyperLink</asp:HyperLink><br/>
                                            </Content>
                                        </ext:Panel>
                                    </ext:Accordion>
                                </Content>
                            </ext:Panel>
                        </West>
                        <Center>
                            <ext:TabPanel runat="server" ID="CenterTabPanel" ActiveTabIndex="-1">
                                <Tabs>
                                </Tabs>
                            </ext:TabPanel>
                        </Center>
                    </ext:BorderLayout>
                </Content>
            </ext:ViewPort>
        </form>
    </body>
    </html>
    Hope this helps
    Last edited by geoffrey.mcgill; Feb 22, 2011 at 2:54 AM.
  3. #3

    RE: [CLOSED] sample for Nav Panel href to update center panel

    Vladimir

    thanks for your help. I have another question, please. when I call the hlClick function, there is a postback that happens and if I inspect the TabPanels.Tabs.Count property, the new Tab is not listed there.

    My problem is that the URL the user clicks is a GUID which then needs to be translated to the actual URL that needs to load in the iframe. The actual URL are kept in a sitemapnode collection. At what point is the Tabs Collection populated with the new Tab.

    P.S. if I refresh the page, i loose the tab.

    thanks
    idriss
  4. #4

    RE: [CLOSED] sample for Nav Panel href to update center panel

    The sample posted by Vladimir creates a Tab using client-side JavaScript and the Page ViewState is not maintained/updated. If you want the Tab to be maintained after a postback, then you need to re-create the Tab on the PostBack.

    The following thread may be helpful, see*http://forums.ext.net/showthread.php...=1251-5-1.aspx


    Geoffrey McGill
    Founder

Similar Threads

  1. MenuItem Href Dinamic Update
    By threewonders in forum 1.x Help
    Replies: 8
    Last Post: Oct 14, 2014, 12:51 PM
  2. Replies: 1
    Last Post: Oct 26, 2012, 8:52 AM
  3. Center a panel inside another panel
    By PAOLO in forum 1.x Help
    Replies: 0
    Last Post: Oct 03, 2011, 3:44 PM
  4. Replies: 4
    Last Post: Apr 22, 2011, 9:30 PM
  5. Update Panel from Tree Panel selection
    By Marius.Serban in forum 1.x Help
    Replies: 1
    Last Post: May 07, 2009, 6:36 AM

Posting Permissions