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目录下即可。
加载路径：