What's New?

[CLOSED] Layout not applied to panel after dynamic rendering when used with TabStrip

Page 1 of 2 12 LastLast
  1. #1
    Jul 25, 2011, 2:29 PM

    [CLOSED] Layout not applied to panel after dynamic rendering when used with TabStrip

    Hi, I'm having trouble dynamically adding new panels for use with tabstripitems. The panels are being created and are being displayed on tab click but the panel isn't using the 'fit' layout specified by its container. I've tried using .ForceLayout on creation and also .DoLayout and .SyncSize after creation but they do not appear to be working. I've also tried forcing layout on clientside tabstripitem click. I've included a sample app below that demonstrates the issue so if someone could help that would be fantastic.

    I'm using the latest release and this issue appears at least with Chrome and IE.

    Thanks,

    Gav

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TabContentResizeIssue.aspx.vb"
    Inherits="LargeDropdownTest.TabContentResizeIssue" %>


<%@ 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></title>
</head>
<script runat="server">
    Protected Sub AddTab(sender As Object, e As Ext.Net.DirectEventArgs)
        Dim ID As String = Guid.NewGuid.ToString
        Dim TabStripItem As New Ext.Net.TabStripItem With {.ActionItemID = ID, .Title = ID}
        Dim Panel As New Ext.Net.Panel With {.ID = ID}
        
        TabStrip.AddItem(TabStripItem)
               
        Panel.Html = Panel.ID
        
        TabStrip.SetActiveTab(TabStripItem)
        
        Panel.Render(pnlCentre)
    End Sub
</script>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="rm" runat="server" />
    <ext:Viewport ID="vp" runat="server" Layout="border" ForceLayout="true">
        <Items>
            <ext:Panel ID="pnlCentre" runat="server" Layout="Fit" Region="Center" Title="Center"
                Header="false" ForceLayout="true">
                <TopBar>
                    <ext:Toolbar ID="Toolbar" runat="server">
                        <Items>
                            <ext:TabStrip ID="TabStrip" runat="server" />
                            <ext:Button ID="cmdAddPage" runat="server" Icon="PageAdd" Text="Add Page">
                                <DirectEvents>
                                    <Click OnEvent="AddTab">
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Last edited by Daniil; Jul 26, 2011 at 8:57 AM. Reason: [CLOSED]
  2. #2
    Jul 25, 2011, 2:36 PM
    Hi,

    I did not test your sample, just one issue i noticed, you cannot use Guid as ID because guid contains '-' symbols
    You have to strip that symbol
  3. #3
    Jul 25, 2011, 2:38 PM
    Quote Originally Posted by Vladimir View Post
    Hi,

    I did not test your sample, just one issue i noticed, you cannot use Guid as ID because guid contains '-' symbols
    You have to strip that symbol
    Hi Vlad, sorry I just added that for the test app. The issue still remains. Do you want be to change the code to use a simpler ID?
  4. #4
    Jul 25, 2011, 2:43 PM
    New sample

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TabContentResizeIssue.aspx.vb"
    Inherits="LargeDropdownTest.TabContentResizeIssue" %>


<%@ 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></title>
</head>
<script runat="server">
    Protected Sub AddTab(sender As Object, e As Ext.Net.DirectEventArgs)
        Dim ID As String = Guid.NewGuid.ToString.Replace("-", "")
        Dim TabStripItem As New Ext.Net.TabStripItem With {.ActionItemID = ID, .Title = ID}
        Dim Panel As New Ext.Net.Panel With {.ID = ID}
        
        TabStrip.AddItem(TabStripItem)
               
        Panel.Html = Panel.ID
        
        TabStrip.SetActiveTab(TabStripItem)
        
        Panel.Render(pnlCentre)
    End Sub
</script>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="rm" runat="server" />
    <ext:Viewport ID="vp" runat="server" Layout="border" ForceLayout="true">
        <Items>
            <ext:Panel ID="pnlCentre" runat="server" Layout="Fit" Region="Center" Title="Center"
                Header="false" ForceLayout="true">
                <TopBar>
                    <ext:Toolbar ID="Toolbar" runat="server">
                        <Items>
                            <ext:TabStrip ID="TabStrip" runat="server" />
                            <ext:Button ID="cmdAddPage" runat="server" Icon="PageAdd" Text="Add Page">
                                <DirectEvents>
                                    <Click OnEvent="AddTab">
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
  5. #5
    Jul 25, 2011, 2:44 PM
    Please use AddTo method instead Render (or use RenderMode.AddTo with Render method)
  6. #6
    Jul 25, 2011, 3:44 PM
    Changing to AddTo generates the following exception in the code sample provided.

    Microsoft JScript compilation error: Expected ')'

    The content of the the result.script is as follows:

    TabStrip.add({actionItem:"6d238ee1bf2b43228a501d5b8ce8c22e",title:"6d238ee1bf2b43228a501d5b8ce8c22e"});TabStrip.setActiveTab(0);Ext.net.ResourceMgr.destroyCmp("6d238ee1bf2b43228a501d5b8ce8c22e");new Ext.Panel({id:"6d238ee1bf2b43228a501d5b8ce8c22e",xtype:"panel",html:"6d238ee1bf2b43228a501d5b8ce8c22e"});pnlCentre.addAndDoLayout(6d238ee1bf2b43228a501d5b8ce8c22e);
    Last edited by Daniil; Jul 25, 2011 at 4:05 PM. Reason: Please use [CODE] tags
  7. #7
    Jul 25, 2011, 3:57 PM
    Vlad, ignore the last post. I understand the issue there and have fixed it. Unfortunately it appears to have created a new problem.

    See updated code below

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TabContentResizeIssue.aspx.vb"
    Inherits="LargeDropdownTest.TabContentResizeIssue" %>


<%@ 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></title>
</head>
<script runat="server">
    
    Public Property Count As Integer
        Get
            Return ViewState("count")
        End Get
        Set(value As Integer)
            ViewState("count") = value
        End Set
    End Property
    
    Protected Sub AddTab(sender As Object, e As Ext.Net.DirectEventArgs)
        Dim ID As String = String.Format("pnl{0}", Count)
        Dim TabStripItem As New Ext.Net.TabStripItem With {.ActionItemID = ID, .Title = ID}
        Dim Panel As New Ext.Net.Panel With {.ID = ID}
        pnlCentre.AddTo(Panel)
        TabStrip.AddItem(TabStripItem)
               
        Panel.Html = Panel.ID
        
        TabStrip.SetActiveTab(TabStripItem)
        Count += 1
    End Sub
</script>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="rm" runat="server" AjaxViewStateMode="Enabled" EnableViewState="true" />
    <ext:Viewport ID="vp" runat="server" Layout="border" ForceLayout="true">
        <Items>
            <ext:Panel ID="pnlCentre" runat="server" Layout="Fit" Region="Center" Title="Center"
                Header="false" ForceLayout="true">
                <TopBar>
                    <ext:Toolbar ID="Toolbar" runat="server">
                        <Items>
                            <ext:TabStrip ID="TabStrip" runat="server" />
                            <ext:Button ID="cmdAddPage" runat="server" Icon="PageAdd" Text="Add Page">
                                <DirectEvents>
                                    <Click OnEvent="AddTab">
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
  8. #8
    Jul 25, 2011, 4:02 PM
    Please describe your problem
  9. #9
    Jul 25, 2011, 4:04 PM
    Sorry, I receive the following error:

    Microsoft JScript runtime error: 'dom.style' is null or not an object
  10. #10
    Jul 25, 2011, 4:27 PM
    You have to call AddTo for Panel (not forpnlCente)
    Panel.AddTo(pnlCentre)
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] TabStrip / TabPanel When adding new panel (IFrame) they stop loading another tab.
    By AABR in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Dec 27, 2012, 4:18 PM
  2. [CLOSED] Panel Listeners: beforeActivate when panel within (or linked with) tabStrip
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 15, 2012, 11:47 AM
  3. Fit Layout not being applied to GridPanel on collapsed Panel/Tab
    By Travis in forum 1.x Help
    Replies: 2
    Last Post: Apr 19, 2012, 8:09 PM
  4. Dynamic adding off controls to panel with HBox layout
    By joxa83 in forum 1.x Help
    Replies: 2
    Last Post: Feb 21, 2012, 8:05 AM
  5. [CLOSED] Issue with gridpanel rendering within a fit layout
    By Dave.Sanders in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 22, 2008, 6:42 PM

Tags for this Thread

Posting Permissions