使用ExtJS 3.4在网格页脚中添加总行

Question

这是我的网格，我需要对以下列的数据求和dataIndex: 'Ponderación' ：

var store_grid_metas = new Ext.data.ArrayStore({
                  fields: [
                     {name: 'Meta'},
                     {name: '100%'},
                     {name: '75%'},
                     {name: '50%'},
                     {name: '25%'},
                     {name: '0%'},
                     {name: 'Ponderación'},
                     {name: 'Indicador'},
                     //{name: 'Eliminar'}
                  ]
              });



store_grid_metas.loadData(data_metas);

var grid_metas = new Ext.grid.EditorGridPanel({

            store       : store_grid_metas,
            id          : 'grid_metas', 
            title       : 'EVAlUACIÓN DE METAS',
            stripeRows  : true,
            height      :  352,
            width       :  1109,
            autoScroll  : true,
            frame       : true,
            border      : true,
            columnLines : true,
            stateful    : true,
            editable    : true,
            clicksToEdit: 2,


            tbar :  [{
                      text: '<b>DEFINIR METAS</b>',

                      itemId: 'id_btn_definir_metas',
                      icon: '../../icons/add.png',
                      scope: this,
                      scale: 'small',
                      iconAlign: 'left',
                      handler: function(){

                            modal_ventana_definir_metas();
                            Ext.getCmp('id_textarea_observacion_metas').setValue(observación_metas);

                      }
                    },{
                      xtype: 'tbseparator', 
                    },{

                      icon: '../../icons/question-frame.png',
                      itemId: 'id_btn_agregar_metas',
                      disabled : true,
                      listeners: {
                          render: function(c) {
                              new Ext.ToolTip({
                                  dismissDelay: 50000,
                                  target: c.getEl(),
                                  getTargetXY: function() {
                                    return [400, 150];
                                  },
                                  html: 'PRIMERO: <br>  Presione el botón "DEFINIR METAS" para iniciar el proceso de definición de metas.<br><br> SEGUNDO: <br> Dentro de la ventana de definición de metas debe hacer clic en las celdas vacias para completar los datos: <br><br> - Meta (requerida) <br> - Ponderación (requerida) <br> - Observación (opcional). <br><br> TERCERO: <br> Presione el botón "INGRESAR METAS" para cerrar la ventana y cargar las metas para empezar la evaluación.'
                              });
                          }
                      },


                    }],



            fbar:   [{
                      text: '<b>VER ACTA</b>',
                      itemId: 'btn_ver_acta',
                      id : 'btn_ver_acta',
                      icon: '../../icons/clipboard-search-result.png',
                      scope: this,
                      scale: 'medium',
                      iconAlign: 'left',
                      hidden: true,
                      handler: function(){
                          ventana_de_acta();
                      }

                    },{
                      xtype: 'tbseparator', 
                    },{
                      text: '<b>GUARDAR</b>',
                      itemId: 'btn_guardar_meta',
                      icon: '../../icons/disk.png',
                      scope: this,
                      scale: 'medium',
                      iconAlign: 'left',
                      handler: function(){
                        Ext.Msg.alert('Aviso', 'Guardado correctamente');
                      }

                    },{
                      xtype: 'tbseparator', 
                    },{
                      text: '<b>IMPRIMIR PDF</b>',
                      itemId: 'btn_imprimir_pdf_meta_historial',
                      icon: '../../icons/document-pdf.png',
                      scope: this,
                      scale: 'medium',
                      iconAlign: 'left',
                      handler: function(){
                            Ext.Msg.alert('Aviso','Imprimiendo pdf..');
                      }

                    }],  



            columns:[{ 
                      xtype: 'gridcolumn',
                      dataIndex: 'Meta',name: '',
                      header: 'Meta',
                      sortable: true,
                      grupable:true,
                      width: 300,
                      renderer : columnwrapmeta,



                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: '100%',name: '',
                      header: '100%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogridmeta

                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: '75%',name: '',
                      header: '75%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogridmeta
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: '50%',name: '',
                      header: '50%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogridmeta
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: '25%',name: '',
                      header: '25%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogridmeta
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: '0%',name: '',
                      header: '0%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogridmeta
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: 'Ponderación',
                      header: 'Ponderación (%)',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 100

                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: 'Indicador',name: '',
                      header: 'Indicador de cumplimiento',
                      sortable: true,
                      grupable:true,
                      width: 280,
                      renderer : columnwrapmeta


                  }

                  ],




})

网格图像

我找不到3.4的方法

对不起，我的英语

Answer 1

首先，您需要在加载网格存储后创建一个事件，以确保所有数据都已加载到网格。

然后，我们将在网格记录上进行循环以计算特定列的总和。 （在您的情况下为“ Ponderación ”）

结果将是：

grid_metas.getStore().on('load',function(store, records, options) {
    var total = 0;
    for(var i=0;i<store.getCount(); i++) {
        total += grid_metas.store.getAt(i).get('Ponderación');
    }
    alert(total);
},this);

如果您想将其添加到网格的页脚中，请使用以下代码：

var me = this;

me.displayTotal = new Ext.form.DisplayField({
    value: ''
});

{
...
bbar :new Ext.PagingToolbar( {
    displayInfo :true,
    pageSize : GridHelper.getDefaultPageSize(),
    store :this.store,
    items: [this.displayTotal]
})
...
}


this.getStore().on('load', function(store, records, option){
    var total = 0;
    for(var i=0;i<store.getCount(); i++) {
        total += grid_metas.store.getAt(i).get('Ponderación');
    }
    me.displayTotal.setValue('&nbsp;&nbsp;&nbsp;<i>Total ' + (total) + '</i>');
});