`
vanhelp.songst
  • 浏览: 67861 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS页面中增加"合计"行

EXT 
阅读更多
遇到给ExtJS页面加一个合计行的问题,在后台代码里添加太麻烦了,这里给大家一个简单的方法。

  //合计函数Begin 
function GridSum(grid)
{
var sum1 = 0; //存储第一个列的合计值
var sum2 = 0; //存储第二个列的合计值
               //...有几个列需要合计就声明几个变量                                
grid.store.each(function(record){   //遍历整个record
sum1 += Number(record.data.money1); //把money1列下面的所有值进行加和运算
sum2 += Number(record.data.money2); //把money2列下面的所有值进行加和运算
          });     
var p = new Ext.data.Record(
   {    
           money1:sum1,  //把money1列与合计后得到的值对应起来
           money2:sum2   //把money2列与合计后得到的值对应起来  
    }
    );                   
  grid.store.insert(0, p);// 插入到当前页的第一行          //grid.store.insert(grid.getStore().getCount(), p);  //插入到当前页的最后一行
  }
   //合计函数End

   // 在Store的load事件被触发后,调用合计函数
gridui.getStore().on('load', function() {

GridSum(gridui.getGrid());//调用合计函数,gridui是你页面中定义的gridui变量名

      });
注: 1.money1,money2是你页面中"钱一"列和"钱二"列各自对应的"dataIndex"属性值。

    2.Store的load事件在"刚进入页面"时,"点击下一页"时,"点击查询"时,都会被触发。

    3.该方法是对当前页的值进行合计,并不统计所有页的总合计值,点击下一页后会自动统   计下页的合计值并显示。
分享到:
评论

相关推荐

    给Extjs的GridPanel增加“合计”行

    在EXTJS中,GridPanel是一种常用的组件,用于展示表格数据。在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...

    ExtJs6 导出excel(包含分组、分组合计行、二重表头)

    在ExtJS6中,数据网格可以配置分组、分组合计行以及二重表头,这些都是增强数据展示和理解的重要特性。分组功能允许将数据按照特定字段进行分类,使数据更有条理;分组合计行则是在每个分组下显示该组数据的总计,...

    ExtJs表格点击超链接获取行的值

    在ExtJs中,我们可以通过多种方式获取选中的行数据,具体取决于我们的选择模式是单选、多选还是单元格选择。 **1. 单选或多选模式** ```javascript var grid = Ext.getCmp('gridId'); var selectedRecords = grid....

    EXTJS页面编辑器

    EXTJS页面编辑器是EXTJS开发过程中的得力助手,它降低了EXTJS开发的门槛,提升了开发效率,同时也增强了项目的可维护性和一致性。通过vjPage等子文件,你可以看到编辑器生成的具体页面实例,进一步学习和理解EXTJS...

    ext grid 合计行

    找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    在"ExtJs3.3中文API.CHM"中,开发者可以找到关于ExtJS 3.3的所有API和类的详细描述,以及相关的示例代码。 ExtJS 3.3的核心特性包括: 1. **组件化**:ExtJS基于组件模型,提供了一系列预定义的UI组件,如按钮、...

    EXTJS单元格变色、行变色

    EXTJS中,行变色可以通过viewConfig中的getRowClass函数来实现。在上面的代码中,我们可以看到,getRowClass函数fnRowRenderer被应用于Grid Panel的viewConfig中。这个函数将行的背景颜色根据record的...

    extjs中文文档大全

    在使用过程中,要特别注意ExtJS的MVC(Model-View-Controller)架构,这是其设计的一大亮点。通过模型管理数据,视图展示数据,控制器协调两者,可以使代码结构清晰,易于维护。此外,利用Data Binding功能,可以...

    ExtJS3.0中文API

    绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

    extjs4中文文档

    10. **拖放功能**:EXTJS4支持拖放操作,用户可以轻松实现组件间的拖放行为,如在数据网格中的行排序。 11. **国际化支持**:EXTJS4内置了多语言支持,方便开发多语言版本的应用。 12. **响应式设计**:EXTJS4的...

    extJs2.0 中文手册

    这包括下载ExtJs库文件,以及如何在HTML页面中引入相应的JavaScript和CSS文件。手册可能会提供一些基本的示例代码来说明如何初始化一个ExtJs应用程序。 其次,手册将介绍ExtJs的基础组件。ExtJs2.0提供了丰富的一...

    extjs3.0中文API

    在ExtJS中,API涵盖了所有可用的组件、布局、数据绑定、事件处理等。 在ExtJS 3.0中,核心知识点包括: 1. **组件系统**:ExtJS 3.0包含了大量的UI组件,如按钮(Button)、表格(Grid)、面板(Panel)、表单...

    Extjs 中文API文档

    Extjs 中文API文档,有对Extjs相关API的中文说明

    extjs加水印

    首先,我们来看EXTJS中的水印实现。EXTJS允许开发者自定义组件,包括创建具有特定功能的表单、窗口和其他界面元素。为了添加水印,我们需要创建一个新的组件或者扩展已有的组件,例如表格或图像查看器,使其在显示时...

    extjs4 中文API

    extjs4.1 中文API

    EXTJS 不同页面之间的传值问题(数据不经过后台,通过页面取得)

    在EXTJS中,不同页面间的通信是一个常见的需求,特别是当需要在不经过服务器的情况下传递数据时。这篇博客"EXTJS 不同页面之间的传值问题(数据不经过后台,通过页面取得)"探讨的就是如何在EXTJS应用的不同视图间...

    中文的Extjs的api手册

    4. **表格(Grid)**:ExtJS的表格组件支持大量的功能,如分页、排序、过滤、行编辑等,能处理大量数据并提供丰富的交互体验。 5. **表单(Form)**:表单组件提供了丰富的输入控件,如文本框、下拉框、日期选择器...

    EXTJS图书管理系统页面(JAVA)

    在"EXTJS图书管理系统页面(JAVA)"这个项目中,我们主要关注的是EXTJS在图书管理系统中的应用,以及它与Java后端的交互。 EXTJS提供了一套完整的组件库,包括表格、表单、面板、窗口、菜单等,使得开发者可以方便...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    总结来说,`Ext.Panel`和`TreePanel`在EXTJS中是两个关键的组件,它们支持动态加载本地数据,提高了用户体验。理解这两个组件的工作原理和如何利用`Store`、`Ajax`、`TreeStore`进行数据加载,是EXTJS开发中的重要...

Global site tag (gtag.js) - Google Analytics