PDA

View Full Version : [CLOSED] TabPanel component in 'DocumentReady' within 'Listeners' for ResourceManager, second Tab controls shows up on PageLoad



Fahd
Jul 20, 2012, 2:05 PM
ONLY on PageLoad the controls for the second Tab show up, after that it seems to behave fine...

Image Below.

4516



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
var txtBox = new TextBox();

this.PlaceHolder1.Controls.Add(txtBox);

txtBox.ID = "textBox1";
txtBox.Width = Unit.Pixel(50);
}

</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 id="Head1" runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
<Listeners>
<DocumentReady Handler="#{TabPanel1}.add(#{Panel1}); #{TabPanel1}.add(#{Panel2}); #{TabPanel1}.setActiveTab(0);" />
</Listeners>
</ext:ResourceManager>
<br />
<ext:TabPanel ID="TabPanel1" runat="server" Width="200" Height="100" />
<ext:Panel runat="server" ID="Panel1" Title="Title1">
<Content>
<ext:Label Text="label1" ID="label1" runat="server" />
</Content>
</ext:Panel>
<ext:Panel runat="server" ID="Panel2" Title="Title2">
<Content>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
<ext:Label Text="label2" ID="label2" runat="server" />
</Content>
</ext:Panel>
</form>
</body>
</html>

Daniil
Jul 20, 2012, 2:29 PM
Hi,

To fix please set up

DeferredRender="false"
for the TabPanel.

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-cfg-deferredRender (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.tab.Panel-cfg-deferredRender)

But I would prefer to put these tabs into the TabPanel on server side. Though I do not know the initial requirement.

Fahd
Jul 20, 2012, 3:35 PM
That works thanks.

I have tried out your recommendation and it works great in my sample as below about adding the TabPanel items in the codebehind



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var txtBox = new TextBox();

this.PlaceHolder1.Controls.Add(txtBox);

txtBox.ID = "textBox1";
txtBox.Width = Unit.Pixel(50);

TabPanel1.Add(FormPanel1);
TabPanel1.Add(Panel1);
TabPanel1.SetActiveTab(0);
}
}

</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 id="Head1" runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<br />
<ext:TabPanel ID="TabPanel1" runat="server" Width="200" Height="100" DeferredRender="false" />
<ext:FormPanel runat="server" ID="FormPanel1" Title="Title1">
<Content>
<ext:Label Text="label 1" ID="label1" runat="server" />
</Content>
</ext:FormPanel>
<ext:Panel runat="server" ID="Panel1" Title="Title2">
<Content>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
<ext:Label Text="label 2" ID="label2" runat="server" />
</Content>
</ext:Panel>
</form>
</body>
</html>


But when I implement it is my actually application in the same way, it get the error below:
Error: An item with the same key has already been added.

So I decided to leave it in 'DocumentReady' for now.

Will the preformance be better if it was in the codebehind ??

You can mark this as close after you respond to the question above.


Hi,

To fix please set up

DeferredRender="false"
for the TabPanel.

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-cfg-deferredRender (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.tab.Panel-cfg-deferredRender)

But I would prefer to put these tabs into the TabPanel on server side. Though I do not know the initial requirement.

Daniil
Jul 20, 2012, 4:50 PM
But when I implement it is my actually application in the same way, it get the error below:
Error: An item with the same key has already been added.


Can't you add these tabs into the TabPanel directly in the markup? Is there the same exception?



Will the preformance be better if it was in the codebehind ??


I think, yes. The JavaScript actions looks excess in your sample.