extjs4 冻结列_ExtJS4.2学习(14)基于表格的扩展插件（2）

我曾经在第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