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

简介:

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

QQ截图20131112003234.jpg

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
//引入扩展组件
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中引入组件类:

1
2
3
4
5
6
bbar: Ext.create( 'Ext.PagingToolbar' , {
             pageSize: 10,
             store: store,
             displayInfo:  true ,
             plugins:  new  Ext.ux.ProgressBarPager()
         })

OK,来看下效果怎么样

04.jpg

嗯,看起来不错、

但是上面的数据如果一页显示的条数过多的话,很可能导致性能问题,有些人说是extjs做的不好,好吧,下面给种方法让你知道你自己错了:

我们只要为store设置一个参数就可以了。

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

这原理其实就和3D游戏里的一种实现渲染的概念差不多,即表格里显示哪些数据,就把哪些数据显示出来,这样就不用去处理不是的那些DOM,从而提高了整体的效率。

分组表头

借助分组表头(Grouping GridView)这个组件,我们可以实现内容更加复杂的表格组件,有时候我们做报表可能会经常碰到,如下图所示,

02.jpg

上面的效果是怎么实现的呢?网上说是用扩展组件,我自己试了下,发现ExtJS4.2里已经没有这种方法了,我自己琢磨出来下面的方法,你们可以试试:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//定义列
     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

效果如下:

03.jpg

锁定了第一组后,任凭你其他组怎么动,第一组就是不会变动。

下面贴上本节所学的所有代码,方便大家学习调式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<%@ 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 >

本文转自shyy8712872 51CTO博客,原文链接:http://blog.51cto.com/shuyangyang/1343688,如需转载请自行联系原作者


相关文章
|
9天前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
9天前
|
C++
C++ Qt开发:TableWidget表格组件
`QTableWidget` 是 Qt 中用于显示表格数据的部件。它是 `QTableView` 的子类,提供了一个简单的接口,适用于一些不需要使用自定义数据模型的简单表格场景。该组件可以看作是`TreeWidget`树形组件的高级版,表格组件相比于树结构组件灵活性更高,不仅提供了输出展示二维表格功能,还可以直接对表格元素直接进行编辑与修改操作,表格结构分为表头,表中数据两部分,表格结构可看作一个二维数组,通过数组行列即可锁定特定元素。
120 0
C++ Qt开发:TableWidget表格组件
|
JSON JavaScript 小程序
开源Vue表格组件,表格插件源码
开源Vue表格组件,表格插件源码
178 0
开源Vue表格组件,表格插件源码
|
JavaScript
【Vue 开发实战】实战篇 # 45:如何构建可交互的组件文档让代码高亮的显示在页面
【Vue 开发实战】实战篇 # 45:如何构建可交互的组件文档让代码高亮的显示在页面
163 0
【Vue 开发实战】实战篇 # 45:如何构建可交互的组件文档让代码高亮的显示在页面
|
JavaScript
LeafLet实战-扩展工具栏指南
熟悉LeafLet的都知道,LeafLet自带的工具条只有两个按钮,一个放大和缩小。日常业务中,会用到许多的实用工具,比如测距,量测,如何扩展默认的工具条呢?解决方案如下两种:第一、自己基于dom创建页面元素,并挂载在其默认的工具栏中。第二、基于Leaflet.EasyButton进行扩展。
351 0
LeafLet实战-扩展工具栏指南
|
存储 移动开发 前端开发
Qt开发技术:Qt富文本(三)Qt支持的HTML子集(查询手册)以及涉及的类
Qt开发技术:Qt富文本(三)Qt支持的HTML子集(查询手册)以及涉及的类
Qt开发技术:Qt富文本(三)Qt支持的HTML子集(查询手册)以及涉及的类
|
JavaScript 前端开发 数据格式
TaggingJS – 可以灵活定制的 jQuery 标签系统插件
  TaggingJS 是一款 jQuery 插件,用来创建高度可定制的前端标签系统。这款插件不到3KB ,支持主流浏览器。有几种方法来定制 TaggingJS 的默认行为:一是使用  custom_options 定制全局的 TaggingJS 行为;二是给标签框加上 data 属性;三是结合前面两种方式。
923 0
|
Web App开发 JavaScript 容器