[CLOSED] Adding panels to a tab panel throws exception

  1. #1

    [CLOSED] Adding panels to a tab panel throws exception

    Adding panels to a tab panel throws exception. This is the main tab panels. panels are added to thid dynamically from JS code

    <ext:TabPanel 
                    ID="tpMain" 
                    runat="server" 
                    Region="Center" 
                    Margins="0 0 4 0" 
                    EnableTabScroll="true" TabWidth="10px" TabPosition="Top">
                    <Items>
                        <ext:Panel    
                            ID="HomeTab"                     
                            layout="Fit"
                            runat="server" 
                            Title="<%$ Resources:WebResources|Home.FormLabels, Home %>"
                            Icon="ApplicationForm" 
                            Border="false" AutoScroll="true">  
                                    <Listeners>
                                       
                                    </Listeners>                                     
                            </ext:Panel>         
                    </Items>
                    <ToolTips>
                         <ext:ToolTip  runat="server" Delegate="#tpMain__HomeTab" Html="Home" /> 
                    </ToolTips>   
                    <Listeners>
                        <TabChange Fn="History.addToken" />
                    </Listeners>            
                </ext:TabPanel>

    AddPanel: function(config)
    var id="thePanel"
     Ext.Function.defer(function () {
                 
                    tab = tp.addTab({
                        id: id.toString(),
                        title: title,
                        layout: "fit",
                        tabTip: config.title,
                        iconCls: config.icon || 'icon-arrowmerge',
                        closable: isClosable,
                        autoStroll: true,
                        listeners: {
    
                        },
                        loader: {
                            url: "/ProcessManagement/ProcessManagement/",
                            loadMask: false,                             
                            scripts: true,
                            autoLoad: true,
                            passParentSize: true,
                            params:
                                    {
                                        "tabId": id.toString()
                                    }
                        }
    
                    });
                }, 100);
    }

     public class ProcessManagementController : Controller
        {
            //
            // GET: /ProcessManagement/ProcessManagement/
    
            public ActionResult Index()
            {
                return View();
            }
    }
    it is failling here where is the option passed to this function coming from. Do i need to config it in the javascrip above

    
    load : function (options) {
            options = Ext.apply({}, options);
    
            if (this.paramsFn) {
                this.params = this.paramsFn();
            }
            
            if (!Ext.isDefined(options.passParentSize) && this.passParentSize) {
                options.params = options.params || {};
    .>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> failing here<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
                options.params.width = this.body.getWidth(true);
                options.params.height = this.body.getHeight(true);
            }
            
            if (this.renderer == "frame") {
                this.loadFrame(options);
                return;
            }
    
            if (this.directMethod) {
                var me = this,
                    mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
                    params = Ext.apply({}, options.params),
                    callback = options.callback || me.callback,
                    scope = options.scope || me.scope || me;
    
                Ext.applyIf(params, me.params);
                Ext.apply(params, me.baseParams);
    
                Ext.apply(options, {
                    scope    : me,
                    params   : params,
                    callback : me.onComplete
                });
    
                if (me.fireEvent('beforeload', me, options) === false) {
                    return;
                }
    
                if (mask) {
                    me.addMask(mask);
                }
    
                Ext.decode(this.directMethod)(Ext.encode(options.params),{
                    complete : function (success, result, response) {
                        me.onComplete(options, success, {responseText: result});
                    }
                });
    
                me.active = {
                    options  : options,
                    mask     : mask,
                    scope    : scope,
                    callback : callback,
                    success  : options.success || me.success,
                    failure  : options.failure || me.failure,
                    renderer : options.renderer || me.renderer,
                    scripts  : Ext.isDefined(options.scripts) ? options.scripts : me.scripts
                };
    
                me.setOptions(me.active, options);
    
                return; 
            }
            
            Ext.net.ComponentLoader.superclass.load.apply(this, arguments);
        },
    Last edited by Daniil; Mar 09, 2012 at 6:29 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Confirmed, thanks for the report.

    passParentSize: true
    causes the problem.

    Here is the example with the fix.

    Example Parent Page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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>Ext.NET v2 Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript">
            Ext.net.ComponentLoader.override({
                load : function (options) {
                    options = Ext.apply({}, options);
    
                    if (this.paramsFn) {
                        this.params = this.paramsFn();
                    }
    
                    if (options.paramsFn) {
                        options.params = Ext.apply(options.params || {}, options.paramsFn());
                    }
            
                    if (!Ext.isDefined(options.passParentSize) && this.passParentSize) {
                        options.params = options.params || {};
                        options.params.width = this.target.body.getWidth(true);
                        options.params.height = this.target.body.getHeight(true);
                    }
            
                    if (this.renderer == "frame") {
                        this.loadFrame(options);
                        return;
                    }
    
                    if (this.directMethod) {
                        var me = this,
                            mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
                            params = Ext.apply({}, options.params),
                            callback = options.callback || me.callback,
                            scope = options.scope || me.scope || me;
    
                        Ext.applyIf(params, me.params);
                        Ext.apply(params, me.baseParams);
    
                        Ext.apply(options, {
                            scope    : me,
                            params   : params,
                            callback : me.onComplete
                        });
    
                        if (me.fireEvent('beforeload', me, options) === false) {
                            return;
                        }
    
                        if (mask) {
                            me.addMask(mask);
                        }
    
                        Ext.decode(this.directMethod)(Ext.encode(options.params),{
                            complete : function (success, result, response) {
                                me.onComplete(options, success, {responseText: result});
                            }
                        });
    
                        me.active = {
                            options  : options,
                            mask     : mask,
                            scope    : scope,
                            callback : callback,
                            success  : options.success || me.success,
                            failure  : options.failure || me.failure,
                            renderer : options.renderer || me.renderer,
                            scripts  : Ext.isDefined(options.scripts) ? options.scripts : me.scripts
                        };
    
                        me.setOptions(me.active, options);
    
                        return; 
                    }
            
                    Ext.net.ComponentLoader.superclass.load.apply(this, arguments);
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Panel runat="server" Height="200" Width="200">
                <Loader Mode="Frame" Url="Test.aspx" PassParentSize="true">
                    <LoadMask ShowMask="true" />
                </Loader>
            </ext:Panel>
        </form>
    </body>
    </html>
    Example Child Page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Label1.Text = this.Request["width"] + " " + this.Request["height"];
        }
    </script>
    
    <!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>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Label ID="Label1" runat="server" />
    </body>
    </html>
  3. #3
    The fix has been added to SVN and will be publicly available in Beta 2 release.
  4. #4
    Thanks. The exception is no longer happening. Now the call is getting to the Index controller that returns the page. But the page is not been rendered.

    The page that will be added to the tab is has a dataview defined as follows


     <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 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.
  5. #5
    So, if the initial issue has been resolved (described in the thread title), please start a new forum thread.

    I think the new problem is not related to the initial one.

Similar Threads

  1. Replies: 13
    Last Post: Aug 06, 2013, 3:58 AM
  2. [CLOSED] Collapse panel throws error
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 05, 2012, 3:29 AM
  3. Replies: 2
    Last Post: Jan 13, 2012, 4:12 AM
  4. Replies: 4
    Last Post: Sep 14, 2011, 8:01 PM
  5. Paging and Sorting Example throws exception
    By Skorfulose in forum 1.x Help
    Replies: 1
    Last Post: Nov 19, 2009, 3:30 AM

Posting Permissions