如何在煎茶的网格中添加页脚

Posted 2023-02-25

【中文标题】如何在煎茶的网格中添加页脚

【英文标题】：How to add footer in Grid in sencha

【发布时间】：2016-10-04 10:02:13

【问题描述】：

这是我作为 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",

        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" ] 
    )
]

);

这是我的控制器部分，我的网格被绑定为 PurchaseReport.js， 那么我需要在这里进行更改吗？

Ext.define("App.controller.tabs.PurchaseReport", 
extend: "Ext.ux.app.BrowseController",
views: ["tabs.PurchaseReport"],
refs: [
    
        ref: "myPurchaseReportGrid",
        selector: "PurchaseReportTab > 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 < abilities.length; x++) 

                    var ability = abilities[x],
                        button = toolbar.query("button[tooltip=" + ability.Name + "]");
                    if (button.length) 
                        button[0].setVisible(true)
                    
                

            
        ,

        "PurchaseReportTab > gridpanel": 
            bind: this.bind,
            itemdblclick: this.handleRecord,
            selectionchange: this.selectionChange
        


    )

);

这是我的模型部件名称 PurchaseReport.js

 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"
    

);

但是我可以在网格视图中显示记录，但我需要一个页脚区域，我可以在其中显示采购成本总额。在网格的页脚

请不要发现代码错误，因为我删除了很多东西以使其看起来更简单，因为我是新手，请让我知道需要哪些更多细节。

只是一张图片了解更多细节

我尝试添加代码，但它在 Gridview 显示记录的所有页面中显示页脚，我只想在一个页面中显示页脚，而不是在其他页面上，并且还需要显示总购买成本那个

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
  );

【参考方案1】：

要放置页脚，您需要在代码中使用bbar。在您定义网格及其配置的代码中，您需要编写

示例：

 bbar: [
        
        xtype: 'textfield',
        name: 'Total',
        fieldLabel: 'Total',
        allowBlank: false 
        
    ],

请阅读Documentation 以获得更好的理解。 我还为您制作了一个小提琴，以便您可以关联您的项目和网格。 Fiddle

【讨论】：

我需要将此页脚仅应用于特定页面，所以我必须在视图部分添加此代码？（我的 sencha 版本是 4.1）

那么你可以试试这个 :b.bbar 并在其中添加你的代码。是的，这对于 ext 版本 4 来说很好。

我应该在哪里写这个 b.bar，我尝试在 Ext.grid.Panel 中添加 bbar 代码，并显示网格所在页面的总文本框。请查看我添加 bbar 的更新问题

那个地方是正确的，你使用 bbar 的地方。您想在某些特定页面上正确。我要求将您放置bbar 的位置放在您绑定数据的位置。好吧，让我再想想。

我在控制器部分的网格中绑定数据。请在控制器部分查看注释为 //Grid bind start。因为我是 sencha 的新手，所以我需要更多关于在哪里放置代码和所有内容的详细信息，请不要介意

【参考方案2】：

要为某些特定页面添加gridview的页脚，您需要在视图中正确编码为（评论评论：//为了将页脚添加到特定页面的gridview开始）

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" ],
       //In order to add footer down to gridview for particular pages start
        height: 200,
        width: 400,
        bbar: [
        
            dataIndex:"PurchaseCost",
            xtype: 'textfield',
            name: 'Total',
            fieldLabel: 'Total',
            allowBlank: false
        
        ],
        renderTo: Ext.getBody()
       //In order to add footer down to gridview for particular pages end
  
)
]
);

【参考方案3】：

使用下面的代码

Ext.define('Ext.grid.feature.Summary', 

/* Begin Definitions */

extend: 'Ext.grid.feature.AbstractSummary',

alias: 'feature.summary',

/* End Definitions */

/**
 * Gets any fragments needed for the template.
 * @private
 * @return Object The fragments
 */
getFragmentTpl: function() 
    // this gets called before render, so we'll setup the data here.
    this.summaryData = this.generateSummaryData(); 
    return this.getSummaryFragments();
,

/**
 * Overrides the closeRows method on the template so we can include our own custom
 * footer.
 * @private
 * @return Object The custom fragments
 */
getTableFragments: function()
    if (this.showSummaryRow) 
        return 
            closeRows: this.closeRows
        ;
    
,

/**
 * Provide our own custom footer for the grid.
 * @private
 * @return String The custom footer
 */
closeRows: function() 
    return '</tpl>[this.printSummaryRow()]';
,

/**
 * Gets the data for printing a template row
 * @private
 * @param Number index The index in the template
 * @return Array The template values
 */
getPrintData: function(index)
    var me = this,
        columns = me.view.headerCt.getColumnsForTpl(),
        i = 0,
        length = columns.length,
        data = [],
        active = me.summaryData,
        column;

    for (; i < length; ++i) 
        column = columns[i];
        column.gridSummaryValue = this.getColumnValue(column, active);
        data.push(column);
    
    return data;
,

/**
 * Generates all of the summary data to be used when processing the template
 * @private
 * @return Object The summary data
 */
generateSummaryData: function()
    var me = this,
        data = ,
        store = me.view.store,
        columns = me.view.headerCt.getColumnsForTpl(),
        i = 0,
        length = columns.length,
        fieldData,
        key,
        comp;

    for (i = 0, length = columns.length; i < length; ++i) 
        comp = Ext.getCmp(columns[i].id);
        data[comp.dataIndex] = me.getSummary(store, comp.summaryType, comp.dataIndex, false);
    
    return data;

);