Feb 04, 2015, 3:10 PM
[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:
The rows in the Grid disappear after an attempt to collapse a group.
This issue can be resolved by either:
1- Removing the FormPanel.
Also note that removing
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.
Last edited by Daniil; Feb 17, 2015 at 12:38 PM.
Reason: [CLOSED]