UpdateContent() problem.

[berger]

Hello,

First I want to say thank you to the Ext Devs because Ext is an amazing tool kit that has enabled me to develop complex applications easily! Also thank you to the Ext Community for supplying examples that are easy to work off of. With that here is my situation:

I have a TabPanel with 4 tabs. The main tab has a grid in it that upon a cell click it will switch to the 2nd tab. Along with switching tabs I want to update the content in one of my panels in tab 2. When this happens I get an error that states: "Unable to get value of the property 'dom': object is null or undefined" referring to this line of code in ext.axd (I know its one of the dynamic pieces of code):

cmp.getContentTarget().dom.appendChild(el.dom)

The weird part is if I load the application normally (loads to tab 1), then I click tab 2 at the top where the tabs are, then click back to tab 1, then click my grid button to switch to tab 2 and execute UpdateContent() it works perfectly.

My conclusion is that something is not getting loaded until tab 2 is manually clicked.

Here is code for the panel that I want to UpdateContent() in:

 <ext:Panel ID="PanelCalendar" runat="server">
      <Content >
                                                
          <div>
                <table cellpadding="0" cellspacing="0">
                     <thead>
                          <tr>
                               <th>
                                   <asp:Literal ID="litSelectedYear" runat="server" />
                                </th>
                                       <% for (int iWeek = 1; iWeek <= 6; iWeek++)
                                               {
                                                     for (int iDay = 1; iDay <= 7; iDay++)
                                                     {
                                                            if (iWeek == 6 && iDay > 2) break; %>
                                                             <th>
                                                                  <%= GetDayName(iDay) %>
                                                              </th>
                                                      <% }
                                                 } %>
                             </tr>
                       </thead>
                       <asp:Repeater ID="repMonths" runat="server" OnInit="repMonths_OnInit" OnItemDataBound="repMonths_OnItemDataBound">
                               <ItemTemplate>
                                      <tr>
                                           <td class="month">
                                           <asp:HyperLink ID="hylMonth" runat="server" />
                                            </td>
                                             <asp:Repeater ID="repDays" runat="server" OnItemDataBound="repDays_OnItemDataBound">
                                                     <ItemTemplate>
                                                           <td id="tdDay" runat="server">
                                                                 <ext:LinkButton ID="test1" runat="server">
                                                                         <DirectEvents>
                                                                              <Click OnEvent="popOutBox" />
                                                                         </DirectEvents>
                                                                   </ext:LinkButton>
                                                                   <asp:Literal ID="litDay" runat="server" />
                                                              </td>
                                                        </ItemTemplate>
                                                </asp:Repeater>
                                          </tr>
                                 </ItemTemplate>
                       </asp:Repeater>
              </table>
           </div>                               
        </Content>
  </ext:Panel>

If I comment everything out inside the content section it will still crash. meaning I leave the:

<Content> <%--everything commented out--%></Content>

Here is code where I call the actual UpdateContent():

public void EmployeeChangeFromTree(string login)
        {

            if (m_Manager == null || login == null || login == "")
                return;
            m_Employee = m_Manager.SelectEmployee(login);
            Session["Employee"] = login;
            if (m_Employee == null)
                return;

            if (!String.IsNullOrEmpty(m_Employee.employeeTitle))
            {
                PanelSummary.Title += ", " + m_Employee.employeeTitle;
            }

            if (m_Employee.startDate.Year != 1)
            {
                PanelSummary.Title +=  ", started on: " + m_Employee.startDate.ToShortDateString();
            }

            this.StoreQuota.DataSource = m_Employee.Quotas();
            this.StoreQuota.DataBind();
            this.repMonths.DataBind();
            

            StoreLeaveStatus.DataSource = m_Manager.LeaveStatus();
            StoreLeaveStatus.DataBind();
            StoreLeaveStatus2.DataSource = m_Manager.LeaveStatusWithNS();
            StoreLeaveStatus2.DataBind();

            WindowsPrincipal user = new
                WindowsPrincipal((WindowsIdentity)HttpContext.Current.User.Identity);

            if (m_Employee.myManagers.ContainsKey(user.Identity.Name.ToLower()))
            {
                ButtonApproveAll.Disabled = false;
                ComboSetStatusPopOut.Disabled = false;
                ComboSetStatus.Disabled = false;

            }
            else
            {
                ComboSetStatusPopOut.SetValue(0);
                ComboSetStatus.SetValue(0);

                ComboSetStatusPopOut.Disabled = true;
                ComboSetStatus.Disabled = true;
                ButtonApproveAll.Disabled = true;
            }

            
           
            this.PanelCalendar.UpdateContent();
        }

I have tried to get around doing UpdateContent() by using DoLayout(), Render(), and Update(). I have attempted to do that to the parent panel, and the entire tab panel. DoLayout() does not update the content, and the other two cause their own errors.

Please let me know what you think. Thanks! (sorry for the long post, just trying to be specific)

[geoffrey.mcgill]

First I want to say thank you to the Ext Devs because Ext is an amazing tool kit that has enabled me to develop complex applications easily! Also thank you to the Ext Community for supplying examples that are easy to work off of. With that here is my situation:

Thanks for your kind words. We appreciate your feedback.

Regarding the <ext:TabPanel>, please try to set DeferredRender="false" on the TabPanel Control.

Example

<ext:TabPanel runat="server" DeferredRender="false">

[berger]

Regarding the <ext:TabPanel>, please try to set DeferredRender="false" on the TabPanel Control.

Example

<ext:TabPanel runat="server" DeferredRender="false">

Thanks for the reply. Setting my TabPanel to DeferredRender="false" creates an error on start up stating: "Invalid argument." Dealing with the code lines in the dynamic ext.axd:

 b.style.width=d;g.style.width=d;

[geoffrey.mcgill]

Unfortunately I was unable to reproduce the error.

Can you post a simplified .aspx code sample demonstrating the issue. Please simplify the code sample down to just the minimum required to reproduce the problem. As well, we should be able to just copy+paste your code sample and run in a test project, without having to modify to get it running.

[berger]

Unfortunately I was unable to reproduce the error.

Can you post a simplified .aspx code sample demonstrating the issue. Please simplify the code sample down to just the minimum required to reproduce the problem. As well, we should be able to just copy+paste your code sample and run in a test project, without having to modify to get it running.

Here is the test project, I was able to recreate the crash.

<%@ Page Language="C#" AutoEventWireup="True" CodeBehind="Default.aspx.cs" Inherits="testprojcontent._Default" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<head>

</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
     <ext:Viewport ID="Viewport1" runat="server" >
        <Items>
          <ext:TabPanel runat="server" ID="TheTabPanel">
            <Items>
                <ext:Panel runat="server" ID="Tab1">
                    <Items>
                        <ext:Button runat="server" ID="Button1" Text="chaneg tab">
                            <DirectEvents>
                                <Click OnEvent="OnClickButton1"></Click>
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:Panel>

                <ext:Panel runat="server" ID="Tab2">
                    <Items>
                        <ext:Panel runat="server" ID="panelCrash">
                            <Content>
                                <%--NOTHING IN HERE BUT STILL CRASHES--%>
                            </Content>
                        </ext:Panel>
                    </Items>                 
                </ext:Panel>
            </Items>
          </ext:TabPanel>
        </Items>
     </ext:Viewport>
     </form>

</body>

here is the code behind for the button click that changes the tab and calls updateContent()

namespace testprojcontent
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void OnClickButton1(object sender, DirectEventArgs e)
        {
            TheTabPanel.ActiveTab = Tab2;
            panelCrash.UpdateContent();
        }
    }
}

What I did notice here though is that if I now set the tab panel to DeferredRender="false" It does work. So it looks like I will try and debug what is happening in my application when I set that deferredRender="false".

EDIT Jul 31, 2012. 3:40pm CST: I put on that DeferredRender="false" (in my big application) and launched it in chrome (instead of IE9) and it worked! Do you know of any problems with DeferredRender and IE?

[berger]

I am slowly narrowing the problem down. When I use DeferredRender="false" I get an invalid argument error. It deals with

b.style.width=d

That d is a negative number. I heard/read that IE dies if you ever try and pass it a negative number for a width or height. Is there anyway to find out which one of my elements is being set with a negative width?

My hypothesis is that it is happening when I use Layout="fit" or when I am using an autowidth. Any suggestions?

EDIT Aug 1, 2012. 2:30pm CST:

Alright so I have a temporary solution (I understand this is probably bad technique, but I need this to work! Duct-Tape Programming!) I override Ext.list.ListView so it looks something like this.

if (d.indexOf('-') == 0) { d = 0; } b.style.width = d; f.style.width = d

This checks for a '-' character in the first spot of the string, if it sees it I set d to 0. This hack now lets me use DeferredRender='false' in my TabPanel.
To bring this around full circle using DeferredRender="false" enables me to execute UpdateContent() on a specific panel with HTML inside of it.