[CLOSED] Panel with ColumnLayout breaks GroupingSummary in GridPanel when toggling.

  1. #1

    [CLOSED] Panel with ColumnLayout breaks GroupingSummary in GridPanel when toggling.

    Hello.

    If there is a Panel and a GridPanel, both of them inside a FormPanel, and the GridPanel has a GroupingSummary while the Panel has Layout="ColumnLayout", the Grid breaks when a group is collapsed.

    A code sample below:

    <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <script runat="server"> 
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> objectList = new List<object>();
            objectList.Add(new { ID = 1, Employer = "Google", Employee = "John Doe" });
            objectList.Add(new { ID = 2, Employer = "Google", Employee = "Jack Smith" });
            objectList.Add(new { ID = 3, Employer = "Yahoo!", Employee = "Martin Luther" });
            objectList.Add(new { ID = 4, Employer = "Yahoo!", Employee = "Ned Stark" });
            objectList.Add(new { ID = 5, Employer = "Facebook", Employee = "Andy Murray" });
            objectList.Add(new { ID = 6, Employer = "Facebook", Employee = "Jean Jacques Rousseux" });
    
            storeEmployer.DataSource = objectList;
            storeEmployer.DataBind();
        }
           
    </script>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager ID="resourceManager" runat="server">
                </ext:ResourceManager>
                <ext:Store ID="storeEmployer" runat="server" GroupField="Employer">
                    <Model>
                        <ext:Model ID="modelEmployer" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="Int" />
                                <ext:ModelField Name="Employer" Type="String" />
                                <ext:ModelField Name="Employee" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
                <ext:FormPanel runat="server">
                    <Items>
                        <ext:Panel ID="panel" runat="server" Border="true" Height="50" Layout="ColumnLayout">
                            <Items>
                                <ext:TextField runat="server" Width="200" ID="randomTextfield">
                                </ext:TextField>
                                <ext:Button runat="server" Width="80" ID="randomButton" Text="Save">
                                    <Listeners>
                                        <Click Handler="alert('button clicked');">
                                        </Click>
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Panel>
                        <ext:GridPanel Height="500" ID="gridpanel" runat="server" Title="Employers" StoreID="storeEmployer">
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column ID="clnId" runat="server" Hidden="true" DataIndex="ID" Hideable="false" />
                                    <ext:Column ID="clnEmployer" runat="server" DataIndex="Employer" Flex="1" />
                                    <ext:Column ID="clnEmployee" runat="server" DataIndex="Employee" Flex="1" />
                                </Columns>
                            </ColumnModel>
                            <Features>
                                <ext:GroupingSummary ID="group" runat="server" GroupHeaderTplString="{name}" HideGroupedHeader="true"
                                    EnableGroupingMenu="false">
                                </ext:GroupingSummary>
                            </Features>
                        </ext:GridPanel>
                    </Items>
                </ext:FormPanel>
            </div>
        </form>
    </body>
    </html>



    The rows in the Grid disappear after an attempt to collapse a group.





    This issue can be resolved by either:

    1- Removing the FormPanel.

    <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <script runat="server"> 
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> objectList = new List<object>();
            objectList.Add(new { ID = 1, Employer = "Google", Employee = "John Doe" });
            objectList.Add(new { ID = 2, Employer = "Google", Employee = "Jack Smith" });
            objectList.Add(new { ID = 3, Employer = "Yahoo!", Employee = "Martin Luther" });
            objectList.Add(new { ID = 4, Employer = "Yahoo!", Employee = "Ned Stark" });
            objectList.Add(new { ID = 5, Employer = "Facebook", Employee = "Andy Murray" });
            objectList.Add(new { ID = 6, Employer = "Facebook", Employee = "Jean Jacques Rousseux" });
    
            storeEmployer.DataSource = objectList;
            storeEmployer.DataBind();
        }
           
    </script>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager ID="resourceManager" runat="server">
                </ext:ResourceManager>
                <ext:Store ID="storeEmployer" runat="server" GroupField="Employer">
                    <Model>
                        <ext:Model ID="modelEmployer" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="Int" />
                                <ext:ModelField Name="Employer" Type="String" />
                                <ext:ModelField Name="Employee" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
                <ext:Panel ID="panel" runat="server" Title="Info" Border="true" Height="50" Layout="ColumnLayout">
                    <Items>
                        <ext:TextField runat="server" Width="200" ID="randomTextfield">
                        </ext:TextField>
                        <ext:Button runat="server" Width="80" ID="randomButton" Text="Save">
                            <Listeners>
                                <Click Handler="alert('button clicked');">
                                </Click>
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Panel>
                <ext:GridPanel Height="500" ID="gridpanel" runat="server" Title="Employers" StoreID="storeEmployer">
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column ID="clnId" runat="server" Hidden="true" DataIndex="ID" Hideable="false" />
                            <ext:Column ID="clnEmployer" runat="server" DataIndex="Employer" Flex="1" />
                            <ext:Column ID="clnEmployee" runat="server" DataIndex="Employee" Flex="1" />
                        </Columns>
                    </ColumnModel>
                    <Features>
                        <ext:GroupingSummary ID="group" runat="server" GroupHeaderTplString="{name}" HideGroupedHeader="true"
                            EnableGroupingMenu="false">
                        </ext:GroupingSummary>
                    </Features>
                </ext:GridPanel>
            </div>
        </form>
    </body>
    </html>
    2- Assigning a Width value for the GridPanel while keeping the FormPanel

    <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <script runat="server"> 
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> objectList = new List<object>();
            objectList.Add(new { ID = 1, Employer = "Google", Employee = "John Doe" });
            objectList.Add(new { ID = 2, Employer = "Google", Employee = "Jack Smith" });
            objectList.Add(new { ID = 3, Employer = "Yahoo!", Employee = "Martin Luther" });
            objectList.Add(new { ID = 4, Employer = "Yahoo!", Employee = "Ned Stark" });
            objectList.Add(new { ID = 5, Employer = "Facebook", Employee = "Andy Murray" });
            objectList.Add(new { ID = 6, Employer = "Facebook", Employee = "Jean Jacques Rousseux" });
    
            storeEmployer.DataSource = objectList;
            storeEmployer.DataBind();
        }
           
    </script>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager ID="resourceManager" runat="server">
                </ext:ResourceManager>
                <ext:Store ID="storeEmployer" runat="server" GroupField="Employer">
                    <Model>
                        <ext:Model ID="modelEmployer" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="Int" />
                                <ext:ModelField Name="Employer" Type="String" />
                                <ext:ModelField Name="Employee" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
                <ext:FormPanel runat="server">
                    <Items>
                        <ext:Panel ID="panel" runat="server" Title="Info" Border="true" Height="50" Layout="ColumnLayout">
                            <Items>
                                <ext:TextField runat="server" Width="200" ID="randomTextfield">
                                </ext:TextField>
                                <ext:Button runat="server" Width="80" ID="randomButton" Text="Save">
                                    <Listeners>
                                        <Click Handler="alert('button clicked');">
                                        </Click>
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Panel>
                        <ext:GridPanel Height="500" Width="200" ID="gridpanel" runat="server" Title="Employers" StoreID="storeEmployer">
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column ID="clnId" runat="server" Hidden="true" DataIndex="ID" Hideable="false" />
                                    <ext:Column ID="clnEmployer" runat="server" DataIndex="Employer" Flex="1" />
                                    <ext:Column ID="clnEmployee" runat="server" DataIndex="Employee" Flex="1" />
                                </Columns>
                            </ColumnModel>
                            <Features>
                                <ext:GroupingSummary ID="group" runat="server" GroupHeaderTplString="{name}" HideGroupedHeader="true"
                                    EnableGroupingMenu="false">
                                </ext:GroupingSummary>
                            </Features>
                        </ext:GridPanel>
                    </Items>
                </ext:FormPanel>
            </div>
        </form>
    </body>
    </html>
    Note that this only happens when the Panel's layout is set to be ColumnLayout.

    Also note that removing
    Layout="ColumnLayout"
    and using instead
    <LayoutConfig>
         <ext:ColumnLayoutConfig>
         </ext:ColumnLayoutConfig>
    </LayoutConfig>
    also has the same effect.
    Attached Thumbnails Click image for larger version. 

Name:	normal.JPG 
Views:	1 
Size:	25.7 KB 
ID:	20371   Click image for larger version. 

Name:	broken.JPG 
Views:	1 
Size:	14.4 KB 
ID:	20381  
    Last edited by Daniil; Feb 17, 2015 at 12:38 PM. Reason: [CLOSED]
  2. #2
    Hello @FpNetWorth,

    I could reproduce your issue on 3.0.0 but good news is: Its already fixed on our latest SVN version.

    Can you check that as well? Is it an option for you to use the latest SVN version?
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] GridPanel with GroupingSummary and RowExpander
    By ehmdb in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 04, 2014, 4:50 AM
  2. Replies: 5
    Last Post: Jul 12, 2013, 1:30 AM
  3. Replies: 7
    Last Post: Jan 11, 2012, 3:52 PM
  4. No scrollbar in panel with columnlayout
    By gidi in forum 1.x Help
    Replies: 2
    Last Post: Aug 08, 2011, 9:11 PM
  5. [CLOSED] ColumnLayout not displaying ... its in a Panel too!
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 26, 2010, 1:17 PM

Tags for this Thread

Posting Permissions