Hi.
I tried it, but the title showed up the top of GridPanel.
but, I want to display it below the title bar with the sum of price.
Sum of price didn't showed up also.
Please see attachment and following code.
[javascript Area]
var refreshTotal = function (e) {
updateTotal(SchDeposit_Grid, SchDeposit_Grid.getTopToolbar());
updateTotal(SchDeposit_Grid, SchDeposit_Grid.getBottomToolbar());
}
// 합계 구하기
var updateTotal = function (grid, tb) {
var fbar = tb, // 합계 툴바
column, // 개별 칼럼 메타데이터
field,
width, // 칼럼 폭
data = { Study_Price: 0, Manage_Price: 0, Commission_Price: 0 }, // 합계 필드 및 데이터 인덱스 (주로 스토어와 맞춘다.)
c, // 개별 칼럼 메타데이터(UI)
cs = grid.view.getColumnData(); // 칼럼 메타데이터 집합
// 합계 라벨 렌더링
var dataIndex = "Label";
field = fbar.find("dataIndex", dataIndex)[0];
fbar.remove(field, false);
fbar.insert(i, field);
width = 0;
for (var i = 0; i < field.colSpan; i++) {
width += grid.getColumnModel().getColumnWidth(i);
}
field.setWidth(width);
// 합계 필드 렌더링
dataIndex = "Manage_Price";
field = fbar.find("dataIndex", dataIndex)[0];
i = 1;
c = cs[i];
fbar.remove(field, false);
fbar.insert(i, field);
width = grid.getColumnModel().getColumnWidth(i);
field.setWidth(width);
//i++;
// 합계 필드 렌더링
dataIndex = "Commission_Price";
field = fbar.find("dataIndex", dataIndex)[0];
i = 2;
c = cs[i];
fbar.remove(field, false);
fbar.insert(i, field);
width = grid.getColumnModel().getColumnWidth(i);
field.setWidth(width);
//i++;
// 합계 필드 렌더링
dataIndex = "Study_Price";
field = fbar.find("dataIndex", dataIndex)[0];
i = 3;
c = cs[i];
fbar.remove(field, false);
fbar.insert(i, field);
width = grid.getColumnModel().getColumnWidth(i);
field.setWidth(width);
fbar.doLayout();
};
[aspx area]
<ext:GridPanel ID="SchDeposit_Grid" runat="server" Height="475" StripeRows="true" ClientIDMode="Static" BaseCls="GridCss">
<%-- Store 시작 --%>
<Store>
<ext:Store ID="SchDepositStore" runat="server" ClientIDMode="Static">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Local" Type="Auto" />
<ext:RecordField Name="S_Code" Type="Auto" />
<ext:RecordField Name="gs_code" Type="Auto" />
<ext:RecordField Name="SS_Code" Type="Auto" />
<ext:RecordField Name="S_Name" Type="Auto" />
<ext:RecordField Name="Study_Month" Type="Auto" />
<ext:RecordField Name="Manage_Price" Type="Auto" />
<ext:RecordField Name="Commission_Price" Type="Auto" />
<ext:RecordField Name="Pay_Price" Type="Auto" />
<ext:RecordField Name="Deposit_Status" Type="Auto" />
<ext:RecordField Name="Deposit_Confirm_Date" Type="Auto" />
<ext:RecordField Name="Account_Date" Type="Auto" />
<ext:RecordField Name="Print_Date" Type="Auto" />
<ext:RecordField Name="ST_Code" Type="Auto" />
<ext:RecordField Name="Sale_Chk" Type="Auto" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<AfterRender Handler="updateTotal();" Delay="400" />
</Listeners>
</ext:Store>
</Store>
<%-- Store 끝 --%>
<%-- Column 시작 --%>
<ColumnModel>
<Columns>
<ext:Column Header="지역" Width="60" Align="Center" DataIndex="Local" MenuDisabled="true" />
<ext:Column Header="교육원명" Width="180" Align="Center" DataIndex="S_Name" MenuDisabled="true">
<Renderer Fn="SNameRender" />
</ext:Column>
<ext:Column Header="청구월" Width="80" Align="Center" DataIndex="Study_Month" MenuDisabled="true" />
<ext:NumberColumn Header="관리비" Width="100" Align="right" DataIndex="Manage_Price" MenuDisabled="true" Format="000,000" />
<ext:NumberColumn Header="커미션" Width="100" Align="right" DataIndex="Commission_Price" MenuDisabled="true" Format="000,000" />
<ext:Column Header="본사입금액" Width="100" Align="right" DataIndex="Pay_Price" MenuDisabled="true">
<Renderer Fn="PayRender" />
</ext:Column>
<ext:Column Header="입금상태" Width="100" Align="Center" MenuDisabled="true">
<Renderer Fn="DepositeRender" />
</ext:Column>
<ext:Column Header="입금확인일" Width="120" Align="Center" DataIndex="Deposit_Confirm_Date" MenuDisabled="true" />
</Columns>
</ColumnModel>
<%-- Column 끝 --%>
<%-- SelectionModel 설정 시작 --%>
<SelectionModel>
<ext:CheckboxSelectionModel ID="SchDepositCheckModel" runat="server" CheckOnly="true" ClientIDMode="Static" Width="25">
<Listeners>
<RowSelect Handler="record.set('Active', 'true');" />
<RowDeselect Handler="record.set('Active', 'false');" />
</Listeners>
</ext:CheckboxSelectionModel>
</SelectionModel>
<%-- SelectionModel 설정 끝 --%>
<View>
<ext:GridView ID="GridView1" runat="server" />
</View>
<Listeners>
<%-- Column Size 변경시에 합계 줄을 다시 그린다. --%>
<ColumnResize Handler="refreshTotal();" />
<%-- 그리드 렌더링이 완료되면 Store의 데이터 변경시마다 합계를 계산하도록 이벤트 핸들러 등록 --%>
<AfterRender Handler="SchDepositStore.on('datachanged', refreshTotal);" />
</Listeners>
<%-- Top부분에 표시될 부분(합계) 시작 -- Grid TotalRow 예제 참고 ------------------------%>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:DisplayField runat="server" ID="SumTopLabel" ClientIDMode="Static" DataIndex="Label" Text="합계" ColSpan="4" Cls="CalcCCss" />
<ext:DisplayField ID="DisplayField2" runat="server" DataIndex="Manage_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" />
<ext:DisplayField ID="DisplayField3" runat="server" DataIndex="Commission_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" />
<ext:DisplayField ID="DisplayField4" runat="server" DataIndex="Study_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" />
</Items>
</ext:Toolbar>
</TopBar>
<%-- Top부분에 표시될 부분(합계) 끝------------------------%>
<%-- Bottom부분에 표시될 부분(합계) 시작 -- Grid TotalRow 예제 참고 ------------------------%>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:DisplayField runat="server" ID="SumLabel" ClientIDMode="Static" DataIndex="Label" Text="합계" ColSpan="4" Cls="CalcCCss" />
<ext:DisplayField ID="SaleSDMDisp" runat="server" DataIndex="Manage_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" />
<ext:DisplayField ID="SaleSDCDisp" runat="server" DataIndex="Commission_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" />
<ext:DisplayField ID="SaleSDPDisp" runat="server" DataIndex="Study_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" />
</Items>
</ext:Toolbar>
</BottomBar>
<%-- Bottom부분에 표시될 부분(합계) 끝------------------------%>
</ext:GridPanel>