首页 > 代码库 > Ext4.2之Grid扩展,扩展选择策略,自动设置分页组件,让Grid使用更简洁
Ext4.2之Grid扩展,扩展选择策略,自动设置分页组件,让Grid使用更简洁
1.概述：
在Ext项目开发中，Grid是用的最多的组件之一，在使用过程中发现很多的配置都是类似的，在此对Grid做个简单的封装。
任务1.在grid工具栏中经常会有新增、编辑、删除等操作，我们希望当用户选择一条记录时编辑和删除均可点击，当选择多条记录是删除可点击，编辑被禁用，当不选择时，编辑和删除均不可用，一般这些工作都在Controller中增加selectionchange事件和render事件来完成，这样做太繁琐，工作量大，在这里更简洁的解决方案是给grid增加两个选择属性，singleSelects和multiSelects，即单选策略和多选策略来完成，具体方法如下一一介绍。
任务2.grid中分页工具栏一般是必须的，所以也做个封装，不用在具体的grid中在设置分页组件了。
2.效果：（没什么可看的，就是一个普通的grid）
3.代码（重点在这里）
Ext.define(‘app.view.LinkView‘,{ extend:‘ux.Grid‘, alias : ‘widget.linkview‘, singleSelects:[‘edit‘], //单选策略 id multiSelects:[‘delete‘],//多选策略 store : ‘LinkStore‘, columns : [ { text : ‘行号‘, xtype: ‘rownumberer‘, align : ‘center‘, width:40 }, { text : ‘标题‘, dataIndex: ‘linkTitle‘,align : ‘left‘}, { text : ‘连接‘, dataIndex: ‘linkUrl‘,align : ‘left‘} ], tbar : [ { id : ‘add‘, text : ‘新增‘, iconCls:‘Plus-Circle‘ }, ‘-‘, { id : ‘edit‘, text : ‘编辑‘, //glyph : 0xf044 , iconCls:‘Pencil-Color‘ }, ‘-‘, { id : ‘delete‘, text : ‘删除‘, //glyph : 0xf1f8, iconCls:‘Minus-Circle‘ }, ‘->‘, { xtype : ‘textfield‘, id : ‘key‘, name : "key", emptyText:‘标题...‘, enableKeyEvents: true, width : 148 }, { id : ‘userSearch‘, glyph : 0xf002, id:‘search‘, tooltip:‘搜索‘, text : ‘搜索‘ } ], initComponent : function(){ Ext.setGlyphFontFamily(‘FontAwesome‘); this.callParent(arguments); }});
说明：变得简洁了不少吧，红色的部分算是扩展部分。
①singleSelects:[‘edit‘] :表示只有选择一行记录是edit才可点击，其他情况被禁用，edit表示按钮的id。
② multiSelects:[‘delete‘] : 表示当选择不止一条记录时可点击。delete为按钮id
③ 没有看到设置分页组件的代码，但是有分页组件，这都在ux.Grid.js中完成。
④ 还有许多其他默认属性均在ux.Grid.js中设置。
4.ux.Grid.js
/** * 扩展Ext Grid,增加singleSelects和multiSelects,默认有分页组件，说明如下 */Ext.define(‘ux.Grid‘,{ extend:‘Ext.grid.Panel‘, alias : ‘widget.uxgrid‘, frame:false, border:false, layout:‘fit‘, forceFit : true, columnLines : true, //选择策略 singleSelects:null, //单选策略 //当选择一条记录是启用,其他情况禁止 multiSelects:null, //多选策略 //当选择一条或多条记录是启用,不选择是禁用 selType : ‘checkboxmodel‘, multiSelect : true, store : ‘LinkStore‘, emptyText : ‘未找到任何数据!‘, initComponent : function(){ this.callParent(arguments); var grid = this; var singles = this.singleSelects != null?this.singleSelects:[]; var multis = this.multiSelects !=null?this.multiSelects:[]; grid.on(‘render‘,function(){ for(var i=0;i<singles.length;i++){ Ext.getCmp(singles[i]).disable(true); } for(var i=0;i<multis.length;i++){ Ext.getCmp(multis[i]).disable(true); } }); grid.on(‘selectionchange‘,function(selectModel, selected, eOpts){ if(selected.length==1){ for(var i=0;i<singles.length;i++){ Ext.getCmp(singles[i]).enable(true); } for(var i=0;i<multis.length;i++){ Ext.getCmp(multis[i]).enable(true); } }else if(selected.length > 1){ for(var i=0;i<singles.length;i++){ Ext.getCmp(singles[i]).disable(true); } for(var i=0;i<multis.length;i++){ Ext.getCmp(multis[i]).enable(true); } }else{ for(var i=0;i<singles.length;i++){ Ext.getCmp(singles[i]).disable(true); } for(var i=0;i<multis.length;i++){ Ext.getCmp(multis[i]).disable(true); } } }); //设置进度条 grid.addDocked( { xtype : ‘pagingtoolbar‘, store : grid.getStore(), dock : ‘bottom‘, displayInfo : true, plugins:[ //靠左边的页码进度 //Ext.create(‘Ext.ux.SlidingPager‘, {}), //右边显示进度 Ext.create(‘Ext.ux.ProgressBarPager‘,{}) ] } ); }});
说明：
Ext.create(‘Ext.ux.SlidingPager‘, {}),Ext.create(‘Ext.ux.ProgressBarPager‘,{})，这是在Ext.ux.*包中的分页组件风格，要想使用，必须将他们导入到你的项目中，默认在ext的examples包中，把他们考到src目录下即可。
加载路径：
Ext4.2之Grid扩展,扩展选择策略,自动设置分页组件,让Grid使用更简洁
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。