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

最新推荐文章于 2024-04-24 22:51:49 发布

weixin_33878457

最新推荐文章于 2024-04-24 22:51:49 发布

阅读量87

点赞数

文章标签： ux java javascript ViewUI

原文链接：http://blog.51cto.com/shuyangyang/1343688

版权

我曾经在第6节里讲到表格分页，还记得之前的分页组件是什么样的吗？

QQ截图20131112003234.jpg

上面只有文字显示，我们来为其制作的更美观点，好吧，不卖关子了，讲本节的内容：进度条分页控件，这是表格扩展组件。

首先我们需要引入扩展组件才可以使用：

//引入扩展组件 
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='p_w_picpaths/right.gif' />"; 
                        } else { 
                            return "<span style='color:red;font-weight:bold';>禁用</span><img src='p_w_picpaths/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='p_w_picpaths/right.gif' />"; 
                        } else { 
                            return "<span style='color:red;font-weight:bold';>禁用</span><img src='p_w_picpaths/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='p_w_picpaths/right.gif' />"; 
                        } else { 
                            return "<span style='color:red;font-weight:bold';>禁用</span><img src='p_w_picpaths/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='p_w_picpaths/right.gif' />"; 
                        } else { 
                            return "<span style='color:red;font-weight:bold';>禁用</span><img src='p_w_picpaths/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>

连载中，请大家持续关注，本文出自我的个人网站思考者日记网

转载于:https://blog.51cto.com/shuyangyang/1343688

weixin_33878457

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS4.2学习(14)基于表格的扩展插件（2）

我曾经在第6节里讲到表格分页，还记得之前的分页组件是什么样的吗？上面只有文字显示，我们来为其制作的更美观点，好吧，不卖关子了，讲本节的内容：进度条分页控件，这是表格扩展组件。首先我们需要引入扩展组件才可以使用：//引入扩展组件 Ext.Loader.setConfig({enabled: true}); ...
复制链接

扫一扫