Jun 30, 2016, 1:47 AM
Total row for gridpanel not show correctlly
I added dockeditem but shows initial text bellow page tool bar,
but I want it show the correct result for each date group,
please try the sample
but I want it show the correct result for each date group,
please try the sample
<%@ Page Language="C#" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System.Net" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
GridStore.DataSource = new object[]
{
new object[] {"2016-06-27", "1", "Ricky", "1"},
new object[] {"2016-06-27", "2", "Ricky", "4"},
new object[] {"2016-06-28", "3", "Ricky", "7"},
new object[] {"2016-06-29", "4", "Ricky", "1"},
new object[] {"2016-06-29", "5", "Ricky", "3"},
new object[] {"2016-06-29", "6", "Ricky", "2"}
};
GridStore.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/>
<script type="text/javascript" src="/js/ts.js"></script>
<link href="/css/ts.css" type="text/css" rel="stylesheet"/>
<style>
.x-grid-body .x-grid-cell-Cost {
background-color : #f1f2f4;
}
.x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
background-color : #e1e2e4;
}
.task .x-grid-cell-inner {
padding-left: 15px;
}
.x-grid-row-summary .x-grid-cell-inner {
font-weight: bold;
font-size: 11px;
background-color : #f1f2f4;
}
.total-field{
background-color : #fff;
padding : 0px 1px 1px 1px;
margin-right : 1px;
position: absolute;
}
.total-field .x-form-display-field{
font-weight : bold !important;
border : solid 1px silver;
font-size : 11px;
font-family : tahoma, arial, verdana, sans-serif;
color : #000;
padding : 0px 0px 0px 5px;
height : 22px;
margin-top : 0px;
padding-top : 3px;
}
</style>
<script>
var updateTotal = function (grid, container) {
if (!grid.view.rendered) {
return;
}
var field,
value,
width,
c,
cs = grid.headerCt.getVisibleGridColumns();
container.suspendLayout = true;
for (var i = 0; i < cs.length; i++) {
c = cs[i];
if (c.summaryType) {
value = App.Group1.getSummary(grid.store, c.summaryType, c.dataIndex);
} else {
value = "-";
}
field = container.down('component[name="'+c.dataIndex+'"]');
container.remove(field, false);
container.insert(i, field);
width = c.getWidth();
field.setWidth(width - 1);
var r = c.summaryRenderer || simpleRenderer;
field.setValue(r(value, {}, c.dataIndex));
}
container.items.each(function (field) {
var column = grid.headerCt.down('component[dataIndex="'+field.name+'"]');
field.setVisible(column.isVisible());
});
container.suspendLayout = false;
container.updateLayout();
};
var simpleRenderer = function (v) {
return v;
};
var totalCost = function (records) {
var i = 0,
length = records.length,
total = 0,
record;
for (; i < length; ++i) {
record = records[i];
total += record.get('Estimate') * record.get('Rate');
}
return total;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" DirectMethodNamespace="MyCompany" >
</ext:ResourceManager>
<ext:GridPanel
runat="server"
ID="TimeSheetGrid"
ColumnWidth="1"
EnableColumnHide="false"
>
<Store>
<ext:Store
ID="GridStore"
runat="server"
ShowWarningOnFailure="false"
>
<Model>
<ext:Model runat="server" Name="TimeSheetModel" >
<Fields>
<ext:ModelField Name="CreateDate" Type ="Date" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="TSID" />
<ext:ModelField Name="WorkingTime" Type="float"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:SummaryColumn
runat="server"
Text="Date"
Sortable="true"
DataIndex="CreateDate"
SummaryType="Count"
>
<Renderer Format="Date" FormatArgs="'Y-m-d'" />
<SummaryRenderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
<Editor>
<ext:DateField runat="server" Format="yyyy-MM-dd" />
</Editor>
<Filter>
<ext:DateFilter BeforeText="End" AfterText="Star" OnText="" />
</Filter>
</ext:SummaryColumn>
<ext:Column runat="server" Text="User ID" DataIndex="ADCN" Hidden="true" />
<ext:SummaryColumn
runat="server"
Text="Name"
Sortable="true"
DataIndex="Name"
SummaryType="Count"
Width="80"
>
<SummaryRenderer Fn="Ext.util.Format.format()" />
<Editor>
<ext:TextField runat="server" />
</Editor>
<Filter>
<ext:StringFilter />
</Filter>
</ext:SummaryColumn>
<ext:SummaryColumn
runat="server"
Text="WorkingTime"
DataIndex="WorkingTime"
SummaryType="Sum"
Width="80"
>
<Filter>
<ext:NumberFilter />
</Filter>
</ext:SummaryColumn>
</Columns>
</ColumnModel>
<Listeners>
<ColumnResize Handler="updateTotal(this, #{TimeSheetContainer});" />
<ColumnMove Handler="updateTotal(this, #{TimeSheetContainer});" />
<ColumnHide Handler="updateTotal(this, #{TimeSheetContainer});" />
</Listeners>
<View>
<ext:GridView runat="server" TrackOver="true" >
<Listeners>
<Refresh Handler="updateTotal(this.panel, #{TimeSheetContainer});" Delay="100" />
</Listeners>
</ext:GridView>
</View>
<Features>
<ext:GroupingSummary
ID="TimeSheetGroup"
runat="server"
GroupHeaderTplString="{name}"
HideGroupedHeader="true"
EnableGroupingMenu="false" />
</Features>
<DockedItems>
<ext:Container
ID="TimeSheetContainer"
runat="server"
Layout="HBoxLayout"
Dock="Bottom"
StyleSpec="margin-top:2px;">
<Defaults>
<ext:Parameter Name="height" Value="24" />
</Defaults>
<Items>
<ext:DisplayField ID="CreateDateDock" runat="server" Name="CreateDate" Cls="total-field" Text="-" />
<ext:DisplayField ID="NameDock" runat="server" Name="Name" Cls="total-field" Text="-" />
</Items>
</ext:Container>
</DockedItems>
<BottomBar>
<ext:PagingToolbar runat="server" >
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>
