Hi Fabrico,
I need to sort a column with data other than those associated with the column.
In the following example, I need to sort column "company" with data in "orderField".
It works with the header menù, but in onclick of header sort direction is always "ASC", also in all cases in the column header the sort icon doesn't appear.
Please help me.
Thank you
Jimmy
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 10, 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 7, 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 6, 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 9, 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 11, 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 15, 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 3, 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 2, 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 1, 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 20, 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 23, 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 21, 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30, 30.27, 1.09, 3.74, "9/1 12:00am" },
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.x-grid-row-over .x-grid-cell-inner {
font-weight : bold;
}
</style>
<script>
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
var sortStore = function (store, sorter)
{
if (sorter[0].config.property == 'company') {
store.sort('orderField', sorter[0].config.direction);
}
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<h1>Simple Array Grid</h1>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="orderField" />
<ext:ModelField Name="price" Type="Float" SortType="AsInt" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Sort Fn="sortStore" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" ></ext:Column>
<ext:Column runat="server" Text="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
</ext:GridPanel>
</body>
</html>