ExtJS4.2学习(14)基于表格的扩展插件（2）（转）

鸣谢：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',50}, //sortable:true 可设置是否为该列进行排序
        {header:'名称',dataIndex:'name',80},
        {header:'描述',dataIndex:'descn',112},
        {header:'状态',dataIndex:'status',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', //渲染位置
        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',50},  
                     {header:'名称',dataIndex:'name',80},  
                     {header:'描述',dataIndex:'descn',112},  
                     {header:'状态',dataIndex:'status',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',50},  
                     {header:'名称',dataIndex:'name',80},  
                     {header:'描述',dataIndex:'descn',112},  
                     {header:'状态',dataIndex:'status',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',50},  
                     {header:'名称',dataIndex:'name',80},  
                     {header:'描述',dataIndex:'descn',112},  
                     {header:'状态',dataIndex:'status',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',50},  
                     {header:'名称',dataIndex:'name',80},  
                     {header:'描述',dataIndex:'descn',112},  
                     {header:'状态',dataIndex:'status',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,  
        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插件）。