042模块Grid的排序和筛选
一、排序
Grid界面排序可以点击列头直接来进行,这个是很方便。但是还有二个问题需要解决:无法取消排序至默认,单字段和多字段排序不可以方便切换。为了解决这二个功能,在pagingtoolbar的前面加了一个SplitButton按钮来控制这二个操作。
在上面的图片中可以看出,新增了一个按钮,下面有一些菜单来控制grid的排序的一些功能。并且显示当前排序的字段以及顺序。下面即是这个控件的源码,这个控件应该可以适用于任何的grid之中。并不是本系统专用。
/**
*
* grid 里面控制排序的一些功能,主要有 单一字段排序,多字段排序,清除排序字段
*
*/
Ext
.define(
'app.module.widget.GridSortButton',
{
extend : 'app.ux.ButtonTransparent',
alias : 'widget.gridsortbutton',
iconCls : 'x-fa fa-sort-amount-asc',
tooltip : '排序设置',
listeners : {
menushow : function(button, menu, eOpts) {
var grid = button.up('grid'), store = grid.getStore();
for (var i = menu.items.length - 1; i > 0; i--)
if (menu.items.getAt(i).sortfield)
menu.remove(menu.items.getAt(i), true);
if (store.getSorters().length === 0) {
menu.items.getAt(0).setDisabled(true);
menu.items.getAt(4).setVisible(false);
menu.items.getAt(5).setVisible(false);
} else {
menu.items.getAt(0).setDisabled(false);
menu.items.getAt(4).setVisible(true);
menu.items.getAt(5).setVisible(true);
store
.getSorters()
.each(
function(sort) {
var menuText = sort.getProperty();
Ext.each(grid.getColumns(), function(column) {
if (column.dataIndex == sort.getProperty()) {
menuText = column.menuText;
return false;
}
});
menu
.add({
text : menuText,
iconCls : sort.getDirection() == 'ASC' ? 'x-fa fa-sort-amount-asc'
: 'x-fa fa-sort-amount-desc',
sortfield : true
})
})
}
}
},
menu : {
items : [ {
text : '恢复默认排序',
handler : function(button) {
var store = button.up('grid').getStore();
store.getSorters().removeAll();
store.load();
}
}, '-', {
text : '单字段排序',
xtype : 'menucheckitem',
checked : true,
group : 'sorttype',
handler : function(button) {
var grid = button.up('grid'), store = grid.getStore();
grid.multiColumnSort = false;
if (grid.lockedGrid) {
grid.lockedGrid.multiColumnSort = false;
grid.normalGrid.multiColumnSort = false;
}
store.getSorters().removeAll();
}
}, {
text : '多字段排序',
xtype : 'menucheckitem',
group : 'sorttype',
handler : function(button) {
var grid = button.up('grid'), store = grid.getStore();
grid.multiColumnSort = true;
if (grid.lockedGrid) {
grid.lockedGrid.multiColumnSort = true;
grid.normalGrid.multiColumnSort = true;
}
}
}, '-', {
text : '当前排序'
} ]
},
initComponent : function() {
this.callParent(arguments);
}
});
二、筛选条件的显示和清除。
Grid列头中提供了筛选条件设置的地方,但是显示和清除都不太方便,为此又做了一个按钮来管理这二个功能。
在选择了一些筛选条件之后,会在下面的按钮里体现出来。
/**
*
* grid 里面控制筛选的一些功能,显示筛选条件,清除筛选条件
*
*/
Ext.define('app.module.widget.GridFilterButton', {
extend : 'app.ux.ButtonTransparent',
alias : 'widget.gridfilterbutton',
iconCls : 'x-fa fa-filter',
tooltip : '筛选条件设置',
listeners : {
menushow : function(button, menu, eOpts) {
var grid = button.up('grid'), store = grid.getStore();
for (var i = menu.items.length - 1; i > 0; i--)
if (menu.items.getAt(i).filterfield)
menu.remove(menu.items.getAt(i), true);
if (store.getFilters().length === 0) {
menu.items.getAt(0).setDisabled(true);
menu.items.getAt(1).setVisible(false);
menu.items.getAt(2).setVisible(false);
} else {
menu.items.getAt(0).setDisabled(false);
menu.items.getAt(1).setVisible(true);
menu.items.getAt(2).setVisible(true);
store.getFilters().each(
function(filter) {
var menuText = filter.dataIndex;
Ext.each(grid.getColumns(), function(column) {
if (column.dataIndex == filter.getProperty()) {
menuText = column.menuText;
return false;
}
});
menu.add({
text : menuText + ' '
+ button.changeOperatorToText(filter.getOperator())
+ ' <span style="color:blue;">' + filter.serialize().value
+ "</span>",
iconCls : 'x-fa fa-filter',
filterfield : true
})
})
}
}
},
menu : {
items : [ {
text : '清除所有筛选条件',
iconCls : 'x-fa fa-eraser',
handler : function(button) {
button.up('grid').filters.clearFilters()
}
}, '-', {
text : '当前筛选条件'
} ]
},
initComponent : function() {
this.callParent(arguments);
},
changeOperatorToText : function(operator) {
switch (operator) {
case 'gt':
return '大于';
case 'lt':
return '小于';
case 'eq':
return '等于';
case 'like':
return '包含文字';
}
return operator;
}
});