我曾经在第6节里讲到表格分页，还记得之前的分页组件是什么样的吗？

上面只有文字显示，我们来为其制作的更美观点，好吧，不卖关子了，讲本节的内容：进度条分页控件，这是表格扩展组件。

首先我们需要引入扩展组件才可以使用：

//引入扩展组件 
Ext.Loader.setConfig({enabled: true}); 
                                                   
Ext.Loader.setPath('Ext.ux', '../ExtJS4.2/ux/'); 
                                                   
Ext.require([ 
    'Ext.data.*', 
    'Ext.grid.*', 
    'Ext.util.*', 
    'Ext.tip.QuickTipManager', 
    'Ext.ux.data.PagingMemoryProxy', 
    'Ext.ux.ProgressBarPager' 
]);

在表格的bbar中引入组件类：

bbar: Ext.create('Ext.PagingToolbar', { 
            pageSize: 10, 
            store: store, 
            displayInfo: true, 
            plugins: new Ext.ux.ProgressBarPager() 
        })

OK，来看下效果怎么样

嗯，看起来不错、

但是上面的数据如果一页显示的条数过多的话，很可能导致性能问题，有些人说是extjs做的不好，好吧，下面给种方法让你知道你自己错了：

我们只要为store设置一个参数就可以了。

buffered:true //缓冲式表格视图

这原理其实就和3D游戏里的一种实现渲染的概念差不多，即表格里显示哪些数据，就把哪些数据显示出来，这样就不用去处理不是的那些DOM，从而提高了整体的效率。

分组表头

借助分组表头（Grouping GridView）这个组件，我们可以实现内容更加复杂的表格组件，有时候我们做报表可能会经常碰到，如下图所示，

上面的效果是怎么实现的呢？网上说是用扩展组件，我自己试了下，发现ExtJS4.2里已经没有这种方法了，我自己琢磨出来下面的方法，你们可以试试：

//定义列 
    var columns = [ 
        { 
            text:'第一组', 
            locked: true, 
            columns:[ 
                     {header:'编号',dataIndex:'id',width:50}, 
                     {header:'名称',dataIndex:'name',width:80}, 
                     {header:'描述',dataIndex:'descn',width:112}, 
                     {header:'状态',dataIndex:'status',width:80,renderer:function(value){ 
                        if(value=='可用'){ 
                            return "可用"; 
                        } else { 
                            return "禁用"; 
                        } 
                     }}] 
        }, 
        {text:'第2组', 
            columns:[ 
                     {header:'编号',dataIndex:'id',width:50}, 
                     {header:'名称',dataIndex:'name',width:80}, 
                     {header:'描述',dataIndex:'descn',width:112}, 
                     {header:'状态',dataIndex:'status',width:80,renderer:function(value){ 
                        if(value=='可用'){ 
                            return "可用"; 
                        } else { 
                            return "禁用"; 
                        } 
                     }}] 
        } 
      ];

上面的方法主要是列里嵌套列，这样就可以实现分组表头的效果。如果想冻结列，那么可以在需要的分组表头里加上locked: true

效果如下：

锁定了第一组后，任凭你其他组怎么动，第一组就是不会变动。

下面贴上本节所学的所有代码，方便大家学习调式：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
 
 
 
 
Hello Extjs4.2 
 
 
 
 
 
 

我的ExtJS4.2学习之路
 

 
作者：束洋洋 
开始日期：2013年11月25日 22:28:49 

深入浅出ExtJS之进度条分页组件

连载中，请大家持续关注，本文出自我的个人网站思考者日记网