title: How to add footer in Grid in sencha
body: <p>This is my view part as PurchaseReport.js</p>
  
  <pre><code>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",
  
          columns: [
            { dataIndex: "PurchaseCost", filter: true, header: "Purchase Cost", width: 150 }
          ],
          features: [{ ftype: "filters", autoReload: false, local: true }],
          store: { model: "App.model.PurchaseReport", sorters: [{ property: "Name", direction: "asc" }] }
      })
  ]
  </code></pre>
  
  <p>});</p>
  
  <p>This is my controller part where my grid get bind as PurchaseReport.js,
  <strong>So do I need to make changes over here?</strong></p>
  
  <pre><code>Ext.define("App.controller.tabs.PurchaseReport", {
  extend: "Ext.ux.app.BrowseController",
  views: ["tabs.PurchaseReport"],
  refs: [
      {
          ref: "myPurchaseReportGrid",
          selector: "PurchaseReportTab &gt; gridpanel"
      }
  ],
  
  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**
  
               **//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()
                  }
                  **//Combobox Bind end**
  
  
                  var abilities = App.coach.Abilities,
                        toolbar = this.getToolbar();
                  for (var x = 0; x &lt; abilities.length; x++) {
  
                      var ability = abilities[x],
                          button = toolbar.query("button[tooltip=" + ability.Name + "]");
                      if (button.length) {
                          button[0].setVisible(true)
                      }
                  }
  
              }
          },
  
          "PurchaseReportTab &gt; gridpanel": {
              bind: this.bind,
              itemdblclick: this.handleRecord,
              selectionchange: this.selectionChange
          }
  
  
      })
  }
  </code></pre>
  
  <p>});</p>
  
  <p>This is my model part name as PurchaseReport.js</p>
  
  <pre><code> Ext.define("App.model.PurchaseReport", {
  extend: "Ext.data.Model",
  fields: [
      {
          name: "PurchaseDate",
          type: "date"
      }
  ],
  
  proxy: {
      type: "ajax",
      url: "ControllerFactory.aspx",
      extraParams: {
          controller: "PurchaseReport",
          operation: "GetPurchaseReportsByCoachIdAndDates"
      },
      reader: {
          type: "json",
          root: "data",
          successProperty: "success"
      }
  }
  </code></pre>
  
  <p>});</p>
  
  <p>However I am able to get the record display in grid view but I need a footer area where I can display <strong>Total amount of Purchase cost</strong>. in footer of grid</p>
  
  <p>Please do not find mistake of code as I had deleted many stuff to make it look simpler, as i am new in this please make me know which more details are being needed.</p>
  
  <p>Just a Image for more detail
  <a href="https://i.stack.imgur.com/nyMLK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nyMLK.png" alt="enter image description here"></a></p>
  
  <p>I have tried adding code as but it is displaying footer in all pages where the Gridview is displaying record, <strong>I want to display footer in one page only and not on other pages and also need total of purchase cost displaying on that</strong> </p>
  
  <pre><code>Ext.define("Ext.grid.Panel", {
  extend: "Ext.panel.Table",
  requires: ["Ext.grid.View"],
  alias: ["widget.gridpanel", "widget.grid"],
  alternateClassName: ["Ext.list.ListView", "Ext.ListView", "Ext.grid.GridPanel"],
  viewType: "gridview",
  lockable: false,
  bothCfgCopy: ["invalidateScrollerOnRefresh", "hideHeaders", "enableColumnHide", "enableColumnMove", "enableColumnResize", "sortableColumns"],
  normalCfgCopy: ["verticalScroller", "verticalScrollDock", "verticalScrollerType", "scroll"],
  lockedCfgCopy: [],
  rowLines: true,
    //Newly addded start
   height: 200,
   width: 400,
  
   bbar: [
          {
          xtype: 'textfield',
          name: 'Total',
          fieldLabel: 'Total',
          allowBlank: false 
          }
              ],
  renderTo: Ext.getBody()
   //Newly addded end
    });
  </code></pre>