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



 我曾经在第6节里讲到表格分页,还记得之前的分页组件是什么样的吗?mUp思考者日记网-束洋洋个人博客

QQ截图20131112003234.jpgmUp思考者日记网-束洋洋个人博客

上面只有文字显示,我们来为其制作的更美观点,好吧,不卖关子了,讲本节的内容:进度条分页控件,这是表格扩展组件。mUp思考者日记网-束洋洋个人博客

首先我们需要引入扩展组件才可以使用:mUp思考者日记网-束洋洋个人博客

//引入扩展组件  
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'  
]);

 mUp思考者日记网-束洋洋个人博客

在表格的bbar中引入组件类:mUp思考者日记网-束洋洋个人博客

bbar: Ext.create('Ext.PagingToolbar', {  
            pageSize: 10,  
            store: store,  
            displayInfo: true,  
            plugins: new Ext.ux.ProgressBarPager()  
        })  

 mUp思考者日记网-束洋洋个人博客

OK,来看下效果怎么样mUp思考者日记网-束洋洋个人博客

04.jpgmUp思考者日记网-束洋洋个人博客

嗯,看起来不错、mUp思考者日记网-束洋洋个人博客

但是上面的数据如果一页显示的条数过多的话,很可能导致性能问题,有些人说是extjs做的不好,好吧,下面给种方法让你知道你自己错了:mUp思考者日记网-束洋洋个人博客

我们只要为store设置一个参数就可以了。mUp思考者日记网-束洋洋个人博客

buffered:true //缓冲式表格视图

这原理其实就和3D游戏里的一种实现渲染的概念差不多,即表格里显示哪些数据,就把哪些数据显示出来,这样就不用去处理不是的那些DOM,从而提高了整体的效率。mUp思考者日记网-束洋洋个人博客

分组表头mUp思考者日记网-束洋洋个人博客

借助分组表头(Grouping GridView)这个组件,我们可以实现内容更加复杂的表格组件,有时候我们做报表可能会经常碰到,如下图所示,mUp思考者日记网-束洋洋个人博客

02.jpgmUp思考者日记网-束洋洋个人博客

上面的效果是怎么实现的呢?网上说是用扩展组件,我自己试了下,发现ExtJS4.2里已经没有这种方法了,我自己琢磨出来下面的方法,你们可以试试:mUp思考者日记网-束洋洋个人博客

//定义列  
    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' />";  
                        }  
                     }}]  
        }  
      ]; 

 mUp思考者日记网-束洋洋个人博客

上面的方法主要是列里嵌套列,这样就可以实现分组表头的效果。如果想冻结列,那么可以在需要的分组表头里加上locked: truemUp思考者日记网-束洋洋个人博客

效果如下:mUp思考者日记网-束洋洋个人博客

03.jpgmUp思考者日记网-束洋洋个人博客

锁定了第一组后,任凭你其他组怎么动,第一组就是不会变动。mUp思考者日记网-束洋洋个人博客

下面贴上本节所学的所有代码,方便大家学习调式:mUp思考者日记网-束洋洋个人博客

<%@ 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>

 mUp思考者日记网-束洋洋个人博客

 mUp思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridmUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridmUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingmUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格mUp思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldmUp思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件mUp思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditormUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 mUp思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解mUp思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目mUp思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈