Mar 27, 2015, 9:52 PM
[CLOSED] Grid Panel Grouping - change in JS
Using the following example, what is the best way to change the grouped column on the fly in JS? Is it possible?
I assume i need to set the store.groupField and do a reconfigure. Please assist.
Thanks,
Zev.
I assume i need to set the store.groupField and do a reconfigure. Please assist.
Thanks,
Zev.
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ 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>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new List<Company>
{
new Company(1, "3m Co", 71.72, 0.02, 0.03, true),
new Company(2, "Alcoa Inc", 29.01, 0.42, 1.47, true),
new Company(3, "Altria Group Inc", 83.81, 0.28, 0.34, true),
new Company(4, "American Express Company", 52.55, 0.01, 0.02, true),
new Company(5, "American International Group, Inc.", 64.13, 0.31, 0.49, true),
new Company(6, "AT&T Inc.", 31.61, -0.48, -1.54, true),
new Company(7, "Boeing Co.", 75.43, 0.53, 0.71, true),
new Company(8, "Caterpillar Inc.", 67.27, 0.92, 1.39, true),
new Company(9, "Citigroup, Inc.", 49.37, 0.02, 0.04, true),
new Company(10, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, true),
new Company(11, "Exxon Mobil Corp", 68.1, -0.43, -0.64, true),
new Company(12, "General Electric Company", 34.14, -0.08, -0.23, true),
new Company(13, "General Motors Corporation", 30.27, 1.09, 3.74, true),
new Company(14, "Hewlett-Packard Co.", 36.53, -0.03, -0.08, true),
new Company(15, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(16, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, true),
new Company(17, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(18, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(19, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(20, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(21, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(22, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(23, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(24, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(25, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(26, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(27, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(28, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(29, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(30, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(31, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(32, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(33, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(34, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(35, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(36, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(37, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(38, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(39, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(40, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(41, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(42, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
};
this.Store1.DataBind();
}
public class Company
{
public Company(long id, string name, double price, double change, double pctChange, bool checkedVal)
{
this.id = id;
this.Name = name;
this.Price = price;
this.Change = change;
this.PctChange = pctChange;
this.checkedVal = checkedVal;
}
public long id { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PctChange { get; set; }
public bool checkedVal { get; set; }
}
</script>
</head>
<body>
<form id="AddNodeForm" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="Store1" runat="server" GroupField="Change">
<Reader>
<ext:JsonReader IDProperty="id">
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Price" />
<ext:RecordField Name="Change" />
<ext:RecordField Name="PctChange" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" AutoScroll="True" Layout="FitLayout">
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Collapsible="true"
Width="600"
Height="350"
AutoExpandColumn="Name"
Title="Plants"
StoreID="Store1"
Frame="true">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Name" Header="Common Name" DataIndex="Name" Width="220" />
<ext:Column DataIndex="Change" Width="130" />
<ext:Column Header="Price" DataIndex="Price" Width="70" Align="right" Groupable="false">
<Renderer Format="UsMoney" />
</ext:Column>
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<View>
<ext:GroupingView
ID="GroupingView1"
HideGroupedColumn="true"
runat="server"
ForceFit="true"
StartCollapsed="true"
GroupTextTpl='<span style="color:white">{text} ({[values.rs.length]} {[values.rs.length > 1 ? "stuffs" : "stuff "]})</span>'
EnableRowBody="true">
</ext:GroupingView>
</View>
<Buttons>
<ext:Button
ID="btnToggleGroups"
runat="server"
Text="Expand/Collapse Groups"
Icon="TableSort"
Style="margin-left: 6px;"
AutoPostBack="false">
</ext:Button>
</Buttons>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Mar 30, 2015 at 2:18 PM.
Reason: [CLOSED]
