What's New?

[CLOSED] RowLayout inside of TabPanel inside of Window causing multiple issues

  1. #1
    Oct 05, 2010, 7:00 PM

    [CLOSED] RowLayout inside of TabPanel inside of Window causing multiple issues

    The first issue is that if I set Split to true on the rowLayout the page errors with:

    Message: 'el' is null or not an object
    Line: 2054
    Char: 41
    Code: 0
    URI: http://localhost/wapadvisor/extnet/e...xt.axd?v=27308

    The second issue is that if I set split to false (so that the page doesn't error), the image "apply.png" on the second tab does not display. If I comment out the first panel completely the image displays properly. Here is the code:

    
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="rlmTest1.aspx.vb" Inherits="WAP.Web.Advisor.rlmTest1" %>
<%@ 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 id="Head1" runat="server">
    <title></title>
 </head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />

 <ext:Window ID="ActionWindow" runat="server" Layout="fit" Width="1024" Height="800" Title="Action: Price Fix" Icon="MoneyDollar" Modal="true" Hidden="false">
    <Items>
        <ext:FitLayout runat="server" ID="FitLayout1">
            <Items>
                <ext:TabPanel ID="ActionTabPanel" runat="server" Border="false">
                    <Items>
                    
                        <ext:Panel ID="Inputs" runat="server" Border="false" Title="Inputs" Padding="0">
                            <Items>
                                <ext:RowLayout ID="RowLayout1" runat="server" Split="true">   
                                    <Rows>
                                        <ext:LayoutRow RowHeight="0.4">
                                            <ext:GridPanel runat="server">
                                                <Store>
                                                    <ext:Store ID="GoodAssetsStore" runat="server">
                                                        <Reader>
                                                            <ext:JsonReader IDProperty="AssetID_in">
                                                                <Fields>
                                                                    <ext:RecordField Name="AssetID_in"></ext:RecordField>
                                                                </Fields>
                                                            </ext:JsonReader>
                                                        </Reader>
                                                    </ext:Store>
                                                </Store>
                                                <ColumnModel ID="ColumnModel2" runat="server">
                                                    <Columns>
                                                        <ext:Column Header="AssetID" Width="160" DataIndex="AssetID_in" />
                                                    </Columns>
                                                </ColumnModel>
                                            </ext:GridPanel>
                                        </ext:LayoutRow>
                                        <ext:LayoutRow RowHeight="0.6">
                                            <ext:Button runat="server"></ext:Button>
                                        </ext:LayoutRow>
                                    </Rows>
                                </ext:RowLayout>
                            </Items>
                        </ext:Panel>
                       
                        <ext:Panel ID="Results" runat="server" Border="true" Title="Results" Icon="MoneyDollar" Disabled="false" >
                            <Items>
                                <ext:RowLayout ID="RowLayoutA" runat="server">
                                    <Rows>
                                        <ext:LayoutRow>
                                            <ext:Panel ID="Panel1" runat="server" Border="false" Padding="10">
                                                <Content>
                                                    <div style="text-align:center">
                                                    All of the eligible assets have been successfully priced.<br />
                                                    </div>
                                                </Content>
                                            </ext:Panel>
                                        </ext:LayoutRow>
                                        <ext:LayoutRow>
                                            <ext:Panel ID="Panel4" runat="server" Layout="hbox" Border="false" Padding="20">
                                                <Items>
                                                    <ext:Container ID="Container4" runat="server" Flex="1" />
                                                    <ext:Container ID="Container5" runat="server">
                                                        <Items>
                                                            <ext:Image ID="Image2" runat="server" ImageUrl="Images/apply.png" Height="48" Width="48" />
                                                        </Items>
                                                    </ext:Container>
                                                    <ext:Container ID="Container6" runat="server" Flex="1" />
                                                </Items>
                                            </ext:Panel>
                                        </ext:LayoutRow>
                                    </Rows>
                                </ext:RowLayout>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="Process" runat="server" Border="false" Title="Process">
                            <Items>

                            </Items>
                        </ext:Panel>

                    </Items>
                </ext:TabPanel>
            </Items>
         </ext:FitLayout>
     </Items>
 </ext:Window>
    
  
    </form>
</body>
</html>
    Last edited by Daniil; Oct 06, 2010 at 7:17 PM. Reason: [CLOSED]
  2. #2
    Oct 05, 2010, 7:44 PM
    Hi rmelancon,

    I'm getting a JavaScript error when I try to run your code sample, so I wasn't able to test.

    You could try setting LayoutOnTabChange="true" on the TabPanel.

    Hope this helps.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Oct 05, 2010, 7:45 PM
    Yeah, the JS error is part of the problem. Change the rowlayout from Split="true" to Split="false" and it will run.
  4. #4
    Oct 05, 2010, 7:53 PM
    Setting LayoutOnTabChange=true almost fixes the image problem except that it doesn't work if the tab is changed via code behind, ie using :

    ActionTabPanel.SetActiveTab(Results)
    Clicking off the tab and then back does display the image.
  5. #5
    Oct 05, 2010, 8:36 PM
    Ok, so I got the image piece working. So now the problem is why can I not set Split=true on the rowlayout?
  6. #6
    Oct 06, 2010, 10:53 AM
    Hi,

    Thank you for the report.
    We're investigating.

    Here is a simplified test sample. Seems the error appears only when it deals with a Window control.

    Example
    <%@ 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>RowLayout Split issue - Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Window runat="server" Layout="fit" Width="500" Height="500">
        <Items>
            <ext:TabPanel runat="server">
                <Items>
                    <ext:Panel runat="server" Title="Tab">
                        <Items>
                            <ext:RowLayout runat="server" Split="true">
                                <Rows>
                                    <ext:LayoutRow RowHeight=".5">
                                        <ext:Panel runat="server" Html="Row 1" />
                                    </ext:LayoutRow>
                                    <ext:LayoutRow RowHeight=".5">
                                        <ext:Panel runat="server" Html="Row 2" />
                                    </ext:LayoutRow>
                                </Rows>
                            </ext:RowLayout>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Window>
    <ext:Window runat="server" Layout="fit" Width="500" Height="500">
        <Items>
            <ext:TabPanel runat="server">
                <Items>
                    <ext:Panel runat="server" Title="Tab" Layout="row">
                        <LayoutConfig>
                            <ext:RowLayoutConfig Split="true" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel runat="server" Html="Row 1" RowHeight=".5" />
                            <ext:Panel runat="server" Html="Row 2" RowHeight=".5" />
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Window>
    </form>
</body>
</html>
  7. #7
    Oct 06, 2010, 4:24 PM
    Hi,

    The issue if Split="true" is fixed. Please update from SVN
    Regarding image issue, you have to set RowHeight or Height for items if you use Rowlayout
    Here is modified sample
    <%@ 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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
    <ext:Window ID="ActionWindow" runat="server" 
        Layout="fit" 
        Width="1024" 
        Height="800"
        Title="Action: Price Fix" 
        Icon="MoneyDollar" 
        Modal="true" 
        Hidden="false">
        <Items>
            <ext:TabPanel ID="ActionTabPanel" runat="server" Border="false">
                <Items>
                    <ext:Panel ID="Inputs" runat="server" 
                        Border="false" 
                        Title="Inputs" 
                        Padding="0" 
                        Layout="Row">
                        <LayoutConfig>
                            <ext:RowLayoutConfig Split="true" />
                        </LayoutConfig>
                        <Items>
                            <ext:GridPanel runat="server" RowHeight="0.4">
                                <Store>
                                    <ext:Store ID="GoodAssetsStore" runat="server">
                                        <Reader>
                                            <ext:JsonReader IDProperty="AssetID_in">
                                                <Fields>
                                                    <ext:RecordField Name="AssetID_in">
                                                    </ext:RecordField>
                                                </Fields>
                                            </ext:JsonReader>
                                        </Reader>
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModel2" runat="server">
                                    <Columns>
                                        <ext:Column Header="AssetID" Width="160" DataIndex="AssetID_in" />
                                    </Columns>
                                </ColumnModel>
                            </ext:GridPanel>
                            <ext:Button runat="server" RowHeight="0.6">
                            </ext:Button>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Results" runat="server" Border="true" Title="Results" Icon="MoneyDollar"
                        Disabled="false" Layout="Row">
                        <Items>
                            <ext:Panel ID="Panel1" runat="server" Border="false" Padding="10" AutoHeight="true">
                                <Content>
                                    <div style="text-align: center">
                                        All of the eligible assets have been successfully priced.<br />
                                    </div>
                                </Content>
                            </ext:Panel>
                            <ext:Panel ID="Panel4" runat="server" Layout="hbox" Border="false" Padding="20" RowHeight="1">
                                <Items>
                                    <ext:Container ID="Container4" runat="server" Flex="1" />
                                    <ext:Image ID="Image2" runat="server" ImageUrl="Images/apply.png" Height="48" Width="48" />
                                    <ext:Container ID="Container6" runat="server" Flex="1" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Process" runat="server" Border="false" Title="Process">
                        <Items>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Window>
    </form>
</body>
</html>
  8. #8
    Oct 07, 2010, 2:49 PM
    Got the new version from SVN and though the split issue is fixed, we are now seeing a problem with CheckMenuItems where the Checked property is not correct on the change event. I reverted back to the previous version of the dlls and the CheckMenuItems work correctly so it seems to be introduced with the latest build. I am working on getting together an isolated example to display the problem.
  9. #9
    Oct 07, 2010, 3:13 PM
    So here is simplified code that illustrates the problem, the CheckMenuItemClient.Checked always returns True:

    code behind:
    Imports Ext.Net
Partial Public Class rlmTest3
    Inherits System.Web.UI.Page


    Protected Sub ContextButton_Change(ByVal sender As Object, ByVal e As DirectEventArgs)
        If CheckMenuItemClient.Checked Then
            myLabel.FieldLabel = "Client Item is Checked"
        ElseIf CheckMenuItemAsset.Checked Then
            myLabel.FieldLabel = "Asset Item is Checked"
        Else
            Exit Sub
        End If
    End Sub

End Class
    and page:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="rlmTest3.aspx.vb" Inherits="WAP.Web.Advisor.rlmTest3" %>

<!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>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport runat="server">
        <Items>
            <ext:Panel ID="Panel3" runat="server" Border="false">
                <Items>
                    <ext:Label ID="myLabel" runat="server" FieldLabel="this will update to what is checked"></ext:Label>
                     <ext:CycleButton ID="ContextButton" runat="server" ShowText="true" IconAlign="Top">
                        <Menu>
                            <ext:Menu ID="ContextMenu" runat="server">
                                <Items>
                                    <ext:CheckMenuItem ID="CheckMenuItemClient" runat="server" Text="Client" Icon="User"
                                        Checked="true" />
                                    <ext:CheckMenuItem ID="CheckMenuItemAsset" runat="server" Text="Asset" Icon="ChartLine" />
                                </Items>
                            </ext:Menu>
                        </Menu>
                        <DirectEvents>
                            <Change OnEvent="ContextButton_Change" />
                        </DirectEvents>
             
                    </ext:CycleButton>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>

    </form>
</body>
</html>
  10. #10
    Oct 07, 2010, 6:27 PM
    Hi,

    Thanks for the sample, fixed in SVN. Please update from SVN or set RenderToForm="true" for menu

Similar Threads

  1. [CLOSED] RowLayout with Splitter inside BorderLayout
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: May 22, 2012, 8:11 AM
  2. [CLOSED] Layout School Part I: GridPanels inside a TabPanel inside a ViewPort
    By wagger in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 18, 2011, 7:06 PM
  3. [CLOSED] Height of a panel inside RowLayout does not apply when the RowLayout is inside a TabPanel
    By anup in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 01, 2011, 11:00 AM
  4. [CLOSED] [1.0] BorderLayout inside GroupTab inside TabPanel not showing up
    By anup in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Sep 22, 2010, 10:07 PM
  5. Multiple columns inside a Fieldset
    By ryanf in forum 1.x Help
    Replies: 0
    Last Post: Dec 17, 2008, 2:34 PM

Posting Permissions