[CLOSED] ext component are not rendered when added to a tab panel

  1. #1

    [CLOSED] ext component are not rendered when added to a tab panel

    Using the tab sample in the example page of v2 shown below

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title></title>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var addTab = function (tabPanel, id, url, menuItem) {
                    var tab = tabPanel.getComponent(id);
    
                    if (!tab) {
                        tab = tabPanel.add({ 
                            id       : id, 
                            title    : url, 
                            closable : true,
                            menuItem : menuItem,
                            loader : {
                                url      : url,
                                rendererType : "iframe",
                                loadMask : {
                                    showMask : true,
                                    msg : "Loading " + url + "..."
                                }
                            }
                        });
    
                        tab.on("activate", function (tab) {
                            #{MenuPanel1}.setSelection(tab.menuItem);
                        });
                    }
                
                    tabPanel.setActiveTab(tab);
                }
            </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Window ID="Window1" 
                runat="server" 
                Title="Adding tab"
                Width="700" 
                Height="500" 
                Icon="Link" 
                Layout="BorderLayout">
                <Items>
                    <ext:MenuPanel 
                        ID="MenuPanel1" 
                        runat="server" 
                        Width="200" 
                        Region="West">
                        <Menu ID="Menu1" runat="server">
                            <Items>
                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Ext.NET">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'idClt', ' /Administration/Administration/', this);" />
                                    </Listeners>
                                </ext:MenuItem>
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    the url " /Administration/Administration/'" contains the a dataview defined as shown below



    <ext:ResourceManager runat="server">       
       </ext:ResourceManager>
       <div style="clear: both;">
       </div>
       <ext:Panel runat="server" Cls="items-view" Layout="fit" AutoHeight="true"
           Border="false" ID="Thepanel" IDMode="Static">
           <Items>
               <ext:DataView runat="server" SingleSelect="true" OverClass="x-view-over" ItemSelector="div.items-ct"
                   AutoHeight="true" >
                   <Store>
                       <ext:Store runat="server" AutoLoad="true">                       
                           <Proxy>
                               <ext:AjaxProxy Url='<%# Html.GetUrl("Administration","Administration", "GetAdministratorMenu") %>' AutoDataBind="true">
                               <Reader>
                               <ext:JsonReader Root="">                               
                               </ext:JsonReader>
                           </Reader>
                               </ext:AjaxProxy>
                           </Proxy>
                            <Model>
                               <ext:Model  runat="server" IDProperty="Id" >
                                   <Fields>
                                       <ext:ModelField Name="Title"  />
                                       <ext:ModelField Name="Items" IsComplex="true" />                                   
                                   </Fields>
                               </ext:Model>
                           </Model> 
                           <Listeners>                         
                           </Listeners>
                       </ext:Store>
                   </Store>
                   <Tpl runat="server">
                       <Html>
                           <div class="items-ct">
                               <tpl for=".">
                                   <div>                                   
                                        <table style="width:95%; margin:25px 0px 0px 0px">          
                                       <tpl for="Items">
                                           <tpl if="this.isOdd(xindex)">    
                                                <tr>                       
                                                   <td width="50%">
                                                  
                                                    <div class="item-wrap"  url="{Url}" isPopUp={IsPopUp} >
                                                       <div style='padding: 0 5px 5px 5px; float:left;'><img src='{Icon}'  ext:qtip='{Title}'/> </div>
                                                         <div class="title">
                                                           {Title:htmlDecode}<br/>
                                                       </div>
                                                       <div style='padding: 0 5px 5px 5px; word-wrap: break-word;' class="description">
                                                           {Description:htmlDecode}
                                                       </div>
                                                       </div> 
                                               </td>            
                                           </tpl>
                                           <tpl if="this.isOdd(xindex) && xcount == xindex"> 
                                               <td width="50%">                                                              
                                                   <span class="title">&nbsp;</span>            
                                                </td>     
                                            </tr>                                                                                                   
                                           </tpl>
                                           <tpl if="this.isEven(xindex)">                            
                                               <td width="50%">
                                               
                                                   <div class="item-wrap"  url="{Url}" isPopUp={IsPopUp} >
                                                       <div style='padding: 0 5px 5px 5px; float:left;'><img src='{Icon}'  ext:qtip='{Title}'/> </div>
                                                         <div class="title">
                                                           {Title:htmlDecode}<br/>
                                                       </div>
                                                       <div style='padding: 0 5px 5px 5px; word-wrap: break-word;' class="description">
                                                           {Description:htmlDecode}
                                                       </div>
                                                       </div>                                               
                                               </td>
                                               </tr>     
                                           </tpl> 
                                    </tpl>
                                      </table>  
                                  </dl>
                                   </div>
                               </tpl>
                           </div>
                       </Html>
                       <Functions>
                           <ext:JFunction Name="isOdd" Fn="function (i) { return i % 2 == 1; }" />
                           <ext:JFunction Name="isEven" Fn="function (i) { return i % 2 == 0; }" />
                       </Functions>
                   </Tpl>
                   <Listeners>
                       
                   </Listeners>
               </ext:DataView>
           </Items>
           <Listeners>
               
           </Listeners>
     
       </ext:Panel>
    when I clicked on the menu to insert the page the page is inserted but the component was not rendered at all. Even when I have just this on the page the same thing

     <ext:ResourceManager runat="server">
            <Listeners>
            
            </Listeners>
        </ext:ResourceManager>
        <div style="clear: both;">
        </div>
        <ext:Panel runat="server" Cls="items-view" Layout="fit" AutoHeight="true"
            Border="false" ID="Thepanel" IDMode="Explicit">
            <Items>
            <ext:Label runat="server" Text="Sample Text"></ext:Label>
    </Items>
            <Listeners>          
            </Listeners>
    
        </ext:Panel>
    </body>
    </html>

    When I debugged with firefox. The returned page is


        
    <body>   
        <div style="clear: both;">
        </div>
        <div id="Thepanel_Container"></div>
    </body>
    How can this issue be resolved. Strangely, I removed the dataview and added just a panel with an html attribute set to a string and the string was not rendered too. Seems like the ext component are not been processed.
    Last edited by Daniil; Mar 15, 2012 at 9:54 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please replace:
    rendererType : "iframe"
    with
    renderer : "frame"
    It works in the online example:
    https://examples2.ext.net/#/TabPanel/Basic/Add_Tabs/
    because there is "://" in the URL.

    Though I will replace with
    renderer : "frame"
    because "rendererType" is not used at all.

Similar Threads

  1. [CLOSED] dynamically added custom controls not rendered in fieldset
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 25
    Last Post: Feb 24, 2012, 2:58 PM
  2. [CLOSED] [1.0] Get values of Component rendered by XRender
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Sep 08, 2010, 9:17 PM
  3. Replies: 8
    Last Post: Apr 01, 2010, 6:25 PM
  4. Controls added runtime are not rendered
    By cocci in forum 1.x Help
    Replies: 6
    Last Post: Nov 30, 2009, 12:55 PM
  5. [CLOSED] Can a Panel be rendered as a ?
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Nov 09, 2009, 12:54 PM

Posting Permissions