PDA

View Full Version : Total the grid value and display on footer/Textbox



miteshjain
4 Oct 2016, 9:30 AM
Hi I have bind a grid view and in that it has a column name PurchaseCost, I have to total that value of that column and display on footer/Text box

I want the total of middle column in to the down textbox

55253

I have view name PurchaseReport.js



Ext.define("App.view.tabs.PurchaseReport", { extend: "Ext.panel.Panel",
alias: "widget.PurchaseReportTab",
requires: [
"App.model.PurchaseReport", "Ext.toolbar.Toolbar"
],
border: false,
layout: "fit",
items: [
App.Util.buildBrowseConfig({}, {
controller: "PurchaseReport",
primaryKeyField: "PurchaseReportId",
stateful: true,
stateId: "App.view.windows.PurchaseReport-grid",
dockedItems: [{
xtype: 'toolbar',
enableOverflow: true,
id: 'third',
items: [{


xtype: "combo",
displayField: "ShortName",
editable: false,
fieldLabel: "Coach",
hidden: false,
labelWidth: 60,
queryMode: "local",
valueField: "CoachId",
width: 180,
store: {
model: "App.model.Coach",
sorters: [{
property: "ShortName"
}]
}
}
, {
xtype: "datefield",
fieldLabel: "Start Date",
labelWidth: 60,
value: new Date(new Date().setMonth(new Date().getMonth() - 1)),
width: 160
}, {
xtype: "datefield",
fieldLabel: "End Date",
labelWidth: 60,
value: (new Date()),
width: 160
}, {
xtype: "button",
text: "Go",
scale: "large",
tooltip: "Search Data",
hidden: false,
handler: function () {
//alert('clicked');
//document.forms[0].submit('Searching');
}
}


]
}],



columns: [
{ dataIndex: "Name", filter: true, header: "Report Name", width: 150 },
{ dataIndex: "PurchaseCost", filter: true, header: "Purchase Cost", width: 150 },
{ dataIndex: "PurchaseDate", filter: true, format: "m/d/Y h:i a", header: "Purchase Date", sortable: true, width: 150, xtype: "datecolumn" },
{ dataIndex: "UserName", filter: true, header: "User Name", width: 150 },
{ dataIndex: "Email", filter: true, header: "Email", width: 150 },
{ dataIndex: "UserPhone", filter: true, header: "User Phone", width: 150 },
{ dataIndex: "DateCompleted", filter: true, format: "m/d/Y h:i a", header: "Completed Date", sortable: true, width: 150, xtype: "datecolumn" },
{ dataIndex: "CustomerName", filter: true, header: "Customer", width: 150 },
],
height: 200,
width: 400,
bbar: [
{
xtype: 'textfield',
dataIndex: 'total',
fieldLabel: 'PurchaseCostTotal',
name: 'Total',
valueField: "Total"



}
],
features: [{ ftype: "filters", autoReload: false, local: true }],
store: { model: "App.model.PurchaseReport", sorters: [{ property: "Name", direction: "asc" }] },
renderTo: Ext.getBody()


})
]
});


This is my controller part where my grid get bind as PurchaseReport.js,


Ext.define("App.controller.tabs.PurchaseReport", { extend: "Ext.ux.app.BrowseController",
views: ["tabs.PurchaseReport"],
refs: [
{
ref: "myPurchaseReportGrid",
selector: "PurchaseReportTab > gridpanel"
},
{
ref: "startDate",
selector: "PurchaseReportTab > gridpanel > toolbar > datefield[fieldLabel=Start Date]"
},
{
ref: "endDate",
selector: "PurchaseReportTab > gridpanel > toolbar > datefield[fieldLabel=End Date]"
},
{
ref: "coachCombo",
selector: "PurchaseReportTab > gridpanel > toolbar > combo[fieldLabel=Coach]"
},

{
ref: "toolbar",
selector: "PurchaseReportTab > gridpanel > toolbar"
}
],
resetButton: function (button, grid, model, selections) {
if (button.text != "New Test") {
switch (button.tooltip) {
case "Search Data":
button.setDisabled(false);
break;


default:
this.callParent(arguments)
}
}
},
init: function () {
this.control({
PurchaseReportTab: {
bind: function (a, c) {
//Grid bind start
var b = this.getMyPurchaseReportGrid();
b.getSelectionModel().deselectAll();
b.store.removeAll();
b.fireEvent("bind", b, c)
//Grid bind End


// var sum = b.getStore().sum('PurchaseCost');//mj
//alert(textbox);
//combobox Bind Start
var combo = this.getCoachCombo(),
store = combo.store,
options = store.lastOptions || {};
options = Ext.apply({
callback: function () {
combo.select(App.coach.CoachId)
//console.log("called rajesh");
}
}, options);
store.load(options);
if (App.coach.IsAdmin) {
combo.show()
}
else {
combo.hide()
}
//combobox Bind Start


var abilities = App.coach.Abilities,
toolbar = this.getToolbar();
for (var x = 0; x < abilities.length; x++) {


var ability = abilities[x],
button = toolbar.query("button[tooltip=" + ability.Name + "]");
if (button.length) {
button[0].setVisible(true)
}
}
}
},
"PurchaseReportTab > gridpanel > toolbar > combo[fieldLabel=Coach]": {
change: function (combo, newValue, oldValue) {
if (newValue) {
var grid = this.getMyPurchaseReportGrid(),
ds = this.getStartDate(),
de = this.getEndDate();


grid.getSelectionModel().deselectAll();
grid.store.removeAll();
grid.store.clearFilter();
var params = {
CoachId: newValue,
StartDate: ds.rawValue,
EndDate: de.rawValue,
operation: "GetPurchaseReportsByCoachIdAndDates"//"GetByCoachId"//"GetPurchaseReportsByCoachIdAndDates"
// operation: "GetByCoachIdAndDates"//mj
};
grid.fireEvent("bind", grid, params)
}
}
},
"PurchaseReportTab > gridpanel": {
bind: this.bind,
itemdblclick: this.handleRecord,
selectionchange: this.selectionChange
},
"PurchaseReportTab > gridpanel > toolbar > button[tooltip=Search Data]": {
//click: this.handleRecord
click: function (item, eventObj) {
//alert('clicked inside function');


var f = this.getCoachCombo(),
ds = this.getStartDate(),
de = this.getEndDate(),
assessmentGrid = this.getMyPurchaseReportGrid()


assessmentGrid.getSelectionModel().deselectAll();
assessmentGrid.store.removeAll();
var g = {
CoachId: f.getValue(),
StartDate: ds.rawValue,
EndDate: de.rawValue,
operation: "GetPurchaseReportsByCoachIdAndDates"
};
assessmentGrid.fireEvent("bind", assessmentGrid, g)
}
}


})
}
});


This is my model part name as PurchaseReport.js



Ext.define("App.model.PurchaseReport", { extend: "Ext.data.Model",
fields: [
{
name: "Name",
type: "string"
},
{
name: "PurchaseDate",
type: "date"
},
{
name: "PurchaseCost",
type: "Decimal"
},
{
name: "UserName",
type: "string"
}
, {
name: "Email",
type: "string"
}, {
name: "UserPhone",
type: "string"
},
{
name: "DateCompleted",
type: "date"
},
{
name: "CustomerName",
type: "string"
}
,
{
name: 'total', type: 'int',
convert: function (val, row) {
var rr = 0 + row.data.PurchaseCost
return rr;
}
}
],


proxy: {
type: "ajax",
url: "ControllerFactory.aspx",
extraParams: {
controller: "PurchaseReport",
operation: "GetPurchaseReportsByCoachIdAndDates"
},
reader: {
type: "json",
root: "data",
successProperty: "success"
}
}
});

Gary Schlosberg
4 Oct 2016, 10:00 AM
You posted in the IO forum so I moved the thread. Which version of Ext JS are you using?

miteshjain
4 Oct 2016, 10:14 AM
You posted in the IO forum so I moved the thread. Which version of Ext JS are you using?

OK Thanks, I am using Sencha 4.1 version, So how can i get an answer of my question?
.