鸣谢：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-26/184.html
---------------------------------------------------------------------------------------
一、进度条分页控件
上面红色框中的是进度条分页控件，这是表格扩展组件。如何做到的呢？
首先我们需要引入扩展组件才可以使用：
//引入扩展组件 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()
})
下面是完整代码：
/** * Grid * 此js演示了ExtJS之进度条分页组件 * bug:1.进度条分页组件不支持IE浏览器；2.表格加载的是本地数据，不能真正进行分页(进度条可显示正确信息。) */ //引入扩展组件 Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../ext-4.2.1/ux/'); Ext.require([ 'Ext.data.*', 'Ext.grid.*', 'Ext.util.*', 'Ext.tip.QuickTipManager', 'Ext.ux.data.PagingMemoryProxy', 'Ext.ux.ProgressBarPager' ]); function getRootPath(){ var curWwwPath=window.document.location.href; var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); var localhostPaht=curWwwPath.substring(0,pos); var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); return(localhostPaht+projectName); } //表格数据最起码有列、数据、转换原始数据这3项 Ext.onReady(function(){ //定义列 var columns = [ {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序 {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='"+getRootPath()+"/js/component/images/right.gif' />"; } else { return "<span style='color:red;font-weight:bold';>禁用</span><img src='"+getRootPath()+"/js/component/images/wrong.gif'/>"; } }} ]; //定义数据 var data =[ ['1','小王','描述01','可用'], ['2','李四','描述02','禁用'], ['3','张三','描述03','可用'], ['4','束洋洋','思考者日记网','可用'], ['5','高飞','描述05','禁用'], ['6','小王','描述01','可用'], ['7','李四','描述02','禁用'], ['8','张三','描述03','可用'], ['9','束洋洋','思考者日记网','可用'], ['10','高飞','描述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(); store.load({params:{start:0,limit:2}}); //创建表格 var grid = new Ext.grid.GridPanel({ renderTo:'grid', //渲染位置 width:550, autoHeight:true, store:store, frame:true, columns:columns, //显示列 stripeRows:true, //斑马线效果 //enableColumnMove: false, //禁止拖放列 //enableColumnResize: false, //禁止改变列宽度 loadMask:true, //显示遮罩和提示功能,即加载Loading…… //forceFit:true //自动填满表格 bbar: Ext.create('Ext.PagingToolbar', { pageSize: 2, store: store, displayInfo: true, plugins: new Ext.ux.ProgressBarPager() }) }); });
二、进度条分页控件——分组表头（Grouping GridView）
借助分组表头（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
下面是完整代码：
/** * Grid * 此js演示了ExtJS之进度条分页组件 * bug:1.进度条分页组件不支持IE浏览器；2.表格加载的是本地数据，不能真正进行分页(进度条可显示正确信息。) */ //引入扩展组件 Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../ext-4.2.1/ux/'); Ext.require([ 'Ext.data.*', 'Ext.grid.*', 'Ext.util.*', 'Ext.tip.QuickTipManager', 'Ext.ux.data.PagingMemoryProxy', 'Ext.ux.ProgressBarPager' ]); function getRootPath(){ var curWwwPath=window.document.location.href; var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); var localhostPaht=curWwwPath.substring(0,pos); var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); return(localhostPaht+projectName); } //表格数据最起码有列、数据、转换原始数据这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='"+getRootPath()+"/js/component/images/right.gif' />"; } else { return "<span style='color:red;font-weight:bold';>禁用</span><img src='"+getRootPath()+"/js/component/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='"+getRootPath()+"/js/component/images/right.gif' />"; } else { return "<span style='color:red;font-weight:bold';>禁用</span><img src='"+getRootPath()+"/js/component/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() }) }); });
后记：1.Extjs的分页始终有问题，此篇博客的数据加载的是本地数据，也无法进行分页。2.IE浏览器不支持本篇博客中的进度条分页控件（ProgressBarPager插件）。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
