[CLOSED] js error this.rvConfig is undefined

[Hlodvig]

Hi,

I'm getting strange error

Error: TypeError: this.rvConfig is undefined
../extnet/extnet-core-js/ext.axd?v=2809
Line: 359

this.rvTask.delay(this.rvConfig.validationBuffer); }},remoteValidate:function(){this.rvConfig.remoteV alid=false;this.rvConfig.remoteValidated=false;var dc=Ext.apply({},this.remoteValidationOptions),opti ons={params:{}};if(this.fireEvent("beforeremoteval idation",this,options)!==false){dc.userSuccess=thi s.remoteValidationSuccess.createDelegate(this);dc. userFailure=this.remoteValidationFailure.createDel egate(this);dc.extraParams=Ext.apply(dc.extraParam s||{},options.params);dc.control=this;dc.eventType ="postback";dc.action="remotevalidation";var o={id:this.id,name:this.name,value:this.getValue() };dc.serviceParams=Ext.encode(o);if(dc.url){dc.cle anRequest=true;if(dc.json&&Ext.isEmpty(dc.method,f alse)){dc.method="POST";}

it's for v1, but in v2 the same error.
May be I have to do something to configure the remote validation or lack some library?

[Vladimir]

Please post simple test case and we will review it

[Hlodvig]

Please post simple test case and we will review it

It's a too complicated code.
In short: I'm migrating old (not mine) code from v1.4 to v2.2 written in c#.
There is a page with tabs. Each tab contains user controls. Some of them contains nested user controls. One tab contains user control with grid panel in it.
The code is designed such as when user clicks on tab, the direct method activates the tab and loads data and the whole page is reloaded in postback event. The main problem is that tab content is not rendered.

I've tried to do simple example, smth like

<asp:Content ID="DashboardRevendeurMainContent" ContentPlaceHolderID="MainContent" runat="server">
    <ext:TabPanel ID="revendeurTabPanel" runat="server" ActiveTabIndex="0" 
        Plain="true" Width="600" onload="revendeurTabPanel_Load">
        <Items>
            <ext:Panel ID="MonProfilPanel" runat="server" Padding="6">
                <Content>
                    <uc:testControl runat="server" ID="MonProfil" />
                </Content>
                <DirectEvents>
                    <Activate OnEvent="MonProfilPanel_Activate" Complete="Ext.net.Mask.hide();">
                        <EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{MonProfilPanel}" />
                    </Activate>
                </DirectEvents>
            </ext:Panel>
            <ext:Panel ID="MaRecherchePanel" runat="server" Padding="6">
                <Content>
                    <ext:TextField runat="server" ID="MaRecherche" Text="aaa" />
                </Content>
                <DirectEvents>
                    <Activate OnEvent="MaRecherchePanel_Activate" Complete="Ext.net.Mask.hide();">
                        <EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{MaRecherchePanel}" />
                    </Activate>
                </DirectEvents>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
</asp:Content>

	public partial class testPanels : BasePage
	{
		protected Revendeur mRevendeur;

		protected void Page_Init(object sender, EventArgs e)
		{
			if (!IsPostBack)
			{
				this.Localize();
			}
		}

		private void Localize()
		{
			this.MonProfilPanel.Title = "MonProfilPanel_Title";
			this.MaRecherchePanel.Title = "MaRecherchePanel_Title";
		}

		protected void Page_Load(object sender, EventArgs e)
		{
			this.mRevendeur = (Revendeur)this.AppUser;
			MonProfil.InitControl();

			if (!IsPostBack && !X.IsAjaxRequest)
			{
				this.LoadMonProfil();
			}
		}

		protected void MonProfilPanel_Activate(object sender, DirectEventArgs e)
		{
			LoadMonProfil();
		}

		[DirectMethod]
		public void LoadMonProfil()
		{
			MonProfil.LoadData(this.mRevendeur);
		}

		protected void MaRecherchePanel_Activate(object sender, DirectEventArgs e)
		{
			LoadMaRecherche();
		}

		[DirectMethod]
		public void LoadMaRecherche()
		{
			MaRecherche.Value = "some text";
		}

		private void ShowErrorBox(string p_title, string p_message)
		{
			X.Msg.Show(new MessageBoxConfig
			{
				Icon = MessageBox.Icon.ERROR,
				Title = p_title,
				Message = p_message,
				Buttons = MessageBox.Button.OK
			});
		}

		protected void revendeurTabPanel_Load(object sender, EventArgs e)
		{
		}
	}
}

and the tab with user control was not rendered until I've added the MonProfilPanel.DoLayout() in the Activate method, but when I tried to do the same in the original code - content still won't render. However I didn;t see the error in subject with the simple example.

Also there was several problems with App namespace - some elements gets this prefix, but some - not. Solved with adding Namespace="" to the ResourceManager element, but still it's strange that not all controls get this prefix.

And the strangest thing is that when I switch to another tab, the content is there at first (i.e grid panel is there), but after the response is written, the grid is no longer there.

Shall I call smth like DoLayout in all nested user controls?

[Vladimir]

We need runable test case
And remove all unrelated code (unrelated with the issue)

[Hlodvig]

We need runable test case
And remove all unrelated code (unrelated with the issue)

Oh, well, I can do that, but there are 9 files - and only images can be attached... copy-paste into the message body?

Before that ...
While creating the example I've found out that content is not rendered if I call the gridControlPanel.UpdateContent() following the call of DoLayout. If I just comment out the call to UpdateContent - everything works fine.

And I have to call DoLayout() on panel explicitly because the panel won't auto-height if the method is not called.

So what for the UpdateContent method?

[Hlodvig]

Working example:
testPanels web

<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/Site.Master"
    AutoEventWireup="true" CodeBehind="testPanels.aspx.cs" Inherits="RdC.Front.testPanels" 
    EnableViewState="true" ViewStateMode="Enabled" %>

<asp:Content ID="PanelsHeadContent" ContentPlaceHolderID="HeadContent" runat="server">
    <title>test panels</title>
</asp:Content>
<asp:Content ID="PanelsMainContent" ContentPlaceHolderID="BodyContent" runat="server">
    <ext:TabPanel ID="testTabPanel" runat="server" ActiveTabIndex="0" 
        Plain="true" Width="600" onload="testTabPanel_Load">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Padding="6">
                <Content>
                    <ext:TextField runat="server" ID="textField1" />
                </Content>
                <DirectEvents>
                    <Activate OnEvent="Panel1_Activate" Complete="Ext.net.Mask.hide();">
                        <EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel1}" />
                    </Activate>
                </DirectEvents>
            </ext:Panel>
            <ext:Panel ID="Panel2" runat="server" Padding="6">
                <Content>
                    <ext:TextField runat="server" ID="textField2" />
                </Content>
                <DirectEvents>
                    <Activate OnEvent="Panel2_Activate" Complete="Ext.net.Mask.hide();">
                        <EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel2}" />
                    </Activate>
                </DirectEvents>
            </ext:Panel>
            <ext:Panel ID="Panel3" runat="server" Padding="6">
                <Content>
                    <ext:TextField runat="server" ID="textField3" />
                </Content>
                <DirectEvents>
                    <Activate OnEvent="Panel3_Activate" Complete="Ext.net.Mask.hide();">
                        <EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel3}" />
                    </Activate>
                </DirectEvents>
            </ext:Panel>
            <ext:Panel ID="Panel4" runat="server" Padding="6">
                <Content>
                    <ext:TextField runat="server" ID="textField4" />
                </Content>
                <DirectEvents>
                    <Activate OnEvent="Panel4_Activate" Complete="Ext.net.Mask.hide();">
                        <EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel4}" />
                    </Activate>
                </DirectEvents>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
</asp:Content>

code behind:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using System.Web.Security;

namespace RdC.Front
{
	public partial class testPanels : RdC.Front.BasePage
	{
		protected void Page_Init(object sender, EventArgs e)
		{
			if (!IsPostBack)
			{
				this.Localize();
			}
		}

		private void Localize()
		{
			this.Panel1.Title = "nothing done";
			this.Panel2.Title = "updateContent";
			this.Panel3.Title = "updateContent and doLayout";
			this.Panel4.Title = "doLayout";
		}

		protected void Page_Load(object sender, EventArgs e)
		{
			if (!IsPostBack && !X.IsAjaxRequest)
			{
				this.LoadPanel1();
			}
		}

		protected void Panel1_Activate(object sender, DirectEventArgs e)
		{
			textField1.Visible = true;
			textField2.Visible = false;
			textField3.Visible = false;
			textField4.Visible = false;

			LoadPanel1();
		}

		[DirectMethod]
		public void LoadPanel1()
		{
			textField1.Text = " text1 generated at" + DateTime.Now;
		}

		protected void Panel2_Activate(object sender, DirectEventArgs e)
		{
			textField1.Visible = false;
			textField2.Visible = true;
			textField3.Visible = false;
			textField4.Visible = false;

			LoadPanel2();

			Panel2.UpdateContent();
		}

		[DirectMethod]
		public void LoadPanel2()
		{
			textField2.Text = "text2 generated at" + DateTime.Now;
		}

		protected void Panel3_Activate(object sender, DirectEventArgs e)
		{
			textField1.Visible = false;
			textField2.Visible = false;
			textField3.Visible = true;
			textField4.Visible = false;

			LoadPanel3();

			Panel3.UpdateContent();
			Panel3.DoLayout();
		}

		[DirectMethod]
		public void LoadPanel3()
		{
			textField3.Text = "text3 generated at" + DateTime.Now;
		}

		protected void Panel4_Activate(object sender, DirectEventArgs e)
		{
			textField1.Visible = false;
			textField2.Visible = false;
			textField3.Visible = false;
			textField4.Visible = true;

			LoadPanel4();

			Panel4.DoLayout();
		}

		[DirectMethod]
		public void LoadPanel4()
		{
			textField4.Text = "text4 generated at" + DateTime.Now;
		}

		protected void testTabPanel_Load(object sender, EventArgs e)
		{
		}
	}
}

clicking on tabs produces the following:

Tab1:


Tab2:

and js error
Error: TypeError: BodyContent_textField3 is null
Source File: http://127.0.0.1/extnet/extnet-all-js/ext.axd?v=40838
Line: 144

Tab3:


Tab4:


As you can see everything works fine in v2.2 only on Tab4. However in v1.3 everything worked fine with the code like in Tab2.

I don't know, may be it's a feature... Well, there was nothing about UpdateContent in BREAKING CHANGES...
So I guess I have to replace UpdateContent with DoLayout everywhere? And can I do something so DoLayout will be performed automatically?

[Vladimir]

Please use Hidden instead Visible, in this case UpdateContent calling will not be required

[Hlodvig]

Please use Hidden instead Visible, in this case UpdateContent calling will not be required

well, I need visible because I don't need controls from not active tabs be rendered on the page even if they are hidden.
anyway, just changing Visible to Hidden cause nothing good. In that case even tab4 is broken if I switch to tab4 after tab2.

Anyway, what UpdateContent does?

[Vladimir]

UpdateContent rerenders container's Items/Content without container rerendering
About your sample, LoadPanelX methods change Text property of fields. It causes script generation (script to update field on the client side)
UpdateContent destroys widgets first and then recreate it on the client. Therefore previosly generated script cannot be executed

Prevent script generation to resolve the issue (if you call UpdateContent for container)

X.ControlsScripting = false;
        LoadPanel2();
        X.ControlsScripting = true;
        
        Panel2.UpdateContent();

[Hlodvig]

I see.
But what about layout? Why the panel is not resized automatically unless I call DoLayout explicitly?

UPD: Found out about AutoDoLayout
From docs: If true .doLayout() is called after render. Default is false.
Why??? Why it is false by default? I have to set to true everywhere now? May be there is a way do define it globally?

Another question - which layout is used by default for panels? I've set it on all panels to FitLayout, but may be it's a FitLayout by default already?