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,
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 "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";
} else {
return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";
}
}}]
},
{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 "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";
} else {
return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";
}
}}]
}
];
上面的方法主要是列里嵌套列，这样就可以实现分组表头的效果。如果想冻结列，那么可以在需要的分组表头里加上locked: true
效果如下：
锁定了第一组后，任凭你其他组怎么动，第一组就是不会变动。
下面贴上本节所学的所有代码，方便大家学习调式：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Extjs4.2</title>
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet">
<script src="../ExtJS4.2/ext-all.js"></script>
<script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//引入扩展组件
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'
]);
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
//定义列
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 "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";
} else {
return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";
}
}}]
},
{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 "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";
} else {
return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";
}
}}]
}
];
//定义数据
var data =[
['1','小王','描述01','可用'],
['2','李四','描述02','禁用'],
['3','张三','描述03','可用'],
['4','束洋洋','思考者日记网','可用'],
['5','高飞','描述05','禁用'],
['6','小王','描述01','可用'],
['7','李四','描述02','禁用'],
['8','张三','描述03','可用'],
['9','束洋洋','思考者日记网','可用'],
['10','高飞','描述05','禁用'],
['11','小王','描述01','可用'],
['12','李四','描述02','禁用'],
['13','张三','描述03','可用'],
['14','束洋洋','思考者日记网','可用'],
['15','高飞','描述05','禁用'],
['16','小王','描述01','可用'],
['17','李四','描述02','禁用'],
['18','张三','描述03','可用'],
['19','束洋洋','思考者日记网','可用'],
['20','高飞','描述05','禁用'],
['21','小王','描述01','可用'],
['22','李四','描述02','禁用'],
['23','张三','描述03','可用'],
['24','束洋洋','思考者日记网','可用'],
['25','高飞','描述05','禁用']
];
//转换原始数据为EXT可以显示的数据
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:'name'},
{name:'descn'},
{name:'status'}
],
//buffered:true //缓冲式表格视图
});
//加载数据
store.load();
//创建表格
var grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
autoHeight:true,
width:665,
height: 350,
store:store,
frame:true,
columns:columns, //显示列
stripeRows:true, //斑马线效果
//enableColumnMove: false, //禁止拖放列
//enableColumnResize: false, //禁止改变列宽度
loadMask:true, //显示遮罩和提示功能,即加载Loading……
//forceFit:true //自动填满表格
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
})
});
});
</script>
</head>
<body>
<h1>我的ExtJS4.2学习之路</h1>
<hr />
作者：束洋洋
开始日期：2013年11月25日 22:28:49
<h2>深入浅出ExtJS之进度条分页组件</h2>
<div id="grid"></div>
</body>
</html>
连载中，请大家持续关注，本文出自我的个人网站思考者日记网