ExtJS4.2学习(14)基于表格的扩展插件(2)(转)
2015-11-21 01:15
543 查看
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-26/184.html
---------------------------------------------------------------------------------------
上面红色框中的是进度条分页控件,这是表格扩展组件。如何做到的呢?
首先我们需要引入扩展组件才可以使用:
在表格的bbar中引入组件类:
下面是完整代码:
上面的效果是怎么实现的呢?网上说是用扩展组件,我自己试了下,发现ExtJS4.2里已经没有这种方法了,我自己琢磨出来下面的方法,你们可以试试:
上面的方法主要是列里嵌套列,这样就可以实现分组表头的效果。如果想冻结列,那么可以在需要的分组表头里加上locked: true
下面是完整代码:
后记:1.Extjs的分页始终有问题,此篇博客的数据加载的是本地数据,也无法进行分页。2.IE浏览器不支持本篇博客中的进度条分页控件(ProgressBarPager插件)。
---------------------------------------------------------------------------------------
一、进度条分页控件
上面红色框中的是进度条分页控件,这是表格扩展组件。如何做到的呢?
首先我们需要引入扩展组件才可以使用:
//引入扩展组件 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() }) }); });
二、进度条分页控件——[b]分组表头(Grouping GridView)[/b]
借助[b]分组表头(Grouping GridView)这个组件,我们可以实现内容更加复杂的表格组件,有时候我们做报表可能会经常碰到,如下图所示:[/b]上面的效果是怎么实现的呢?网上说是用扩展组件,我自己试了下,发现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插件)。
相关文章推荐
- 学习日记:json之what,why,where,how及应用
- js原生封装自定义滚动条
- ExtJS4.2学习(13)基于表格的扩展插件---rowEditing
- webpack bable-loader升级无法编译jsx es6
- javascript实现Email邮件显示与删除功能
- JavaScript实现自动生成网页元素功能(按钮、文本等)
- js实现索引图片切换效果
- javascript实现动态统计图开发实例
- 超详细的javascript数组方法汇总
- 分享经典的JavaScript开发技巧
- js if
- js 参数带0丢失的问题
- JS如何获取多个相同class标签并分别再输出各自的文本
- 转: JSP中include指令和include动作的区别
- 使用js获取表单form的数据
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
- javascript eval函数用法一例
- How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?
- Execute managebean method from javascript onload event
- JS跨域设置和取Cookie