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',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插件）。