来自网格的总金额和在sencha中的文本框中显示

时间:2016-10-04 15:07:37

标签: javascript jquery extjs

我有视图名称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" }],
        height: 200,
        width: 400,
        bbar: [
        {
            dataIndex: "PurchaseCost",
            reference: 'purchaseCostField',
            xtype: 'textfield',
            name: 'Total',
            fieldLabel: 'Total',
            allowBlank: false
        }
        ],
        renderTo: Ext.getBody()

       }
    })
 ]
});

这是我的控制器部分,我的网格绑定为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)
                    }
                }
              store.load(options);
                var purchaseCostField = this.getReferences().purchaseCostField;
                purchaseCostField.setValue(store.sum('PurchaseCost'));
            }
        },

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


    })
}

});

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

 Ext.define("App.model.PurchaseReport", {
extend: "Ext.data.Model",
fields: [
    {
        name: "PurchaseCost",
        type: "date"
    }
],

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

});

页面看起来像这样,我希望在文本框中显示PurchaseCost的总数,如下图所示,购买成本总计约为1195

enter image description here

1 个答案:

答案 0 :(得分:0)

快速做到这一点

添加对文本字段的引用:

        {
            dataIndex:"PurchaseCost",
            reference: 'purchaseCostField',
            xtype: 'textfield',
            name: 'Total',
            fieldLabel: 'Total',
            allowBlank: false
        }

在商店加载后的控制器中,将值添加到文本字段:

store.load(options);
var purchaseCostField = this.getReferences().purchaseCostField;
purchaseCostField.setValue(store.sum('PurchaseCost'));