[英]How does an end user clear the sorting for a grid column?
I use ExtJs 6.6.0 Classic.我使用 ExtJs 6.6.0 Classic。 Thegrid component supports multi-column sorting (I use remoteSort: true, remoteFilter: true).
网格组件支持多列排序(我使用remoteSort:true,remoteFilter:true)。 Whenever the user clicks on a column header, that column becomes the first column in the order by list.
每当用户单击列 header 时,该列将成为按列表排序的第一列。 But I cannot find how an end user is supposed to clear the sorting for a column.
但我找不到最终用户应该如何清除列的排序。 The context menu available through the column header doesn't have a "Clear Sort" option.
通过 header 列可用的上下文菜单没有“清除排序”选项。
See also this kitchensink example .另请参阅此厨房水槽示例。
I feel like I am missing something.我觉得我错过了什么。 There is a sortClearText config for the column inherited from the header, but I could not find a place where it's used (I thought that perhaps there is some config I can use to add the Clear Sort menu item to the column context menu).
从 header 继承的列有一个sortClearText配置,但我找不到使用它的地方(我想也许有一些配置可以用来将清除排序菜单项添加到列上下文菜单中)。
I could add a button to execute the action of clearing the sorting of the store, as a last resort, but I don't like it.我可以添加一个按钮来执行清除商店排序的操作,作为最后的手段,但我不喜欢它。
Is there a simple way to add a Clear Sort option for a grid column through the Extjs components configuration?有没有一种简单的方法可以通过 Extjs 组件配置为网格列添加清除排序选项?
Thank you谢谢
I also did not find, but you can use the following override:我也没有找到,但是您可以使用以下覆盖:
Ext.define('overrides.grid.header.Container', {
override: 'Ext.grid.header.Container',
getMenuItems: function() {
var me = this,
menuItems = [],
hideableColumns = me.enableColumnHide ? me.getColumnMenu(me) : null;
if (me.sortable) {
menuItems = [{
itemId: 'ascItem',
text: me.sortAscText,
iconCls: me.menuSortAscCls,
handler: me.onSortAscClick,
scope: me
}, {
itemId: 'descItem',
text: me.sortDescText,
iconCls: me.menuSortDescCls,
handler: me.onSortDescClick,
scope: me
}, {
itemId: 'dropSortItem',
text: me.sortClearText,
//iconCls: me.menuSortDescCls, // Your icon
handler: me.onSortClearClick,
scope: me
}];
}
if (hideableColumns && hideableColumns.length) {
if (me.sortable) {
menuItems.push({
itemId: 'columnItemSeparator',
xtype: 'menuseparator'
});
}
menuItems.push({
itemId: 'columnItem',
text: me.columnsText,
iconCls: me.menuColsIcon,
menu: hideableColumns,
hideOnClick: false
});
}
return menuItems;
},
onSortClearClick: function() {
var menu = this.getMenu(),
activeHeader = menu.activeHeader,
store = this.up('grid').getStore();
store.getSorters().each(function(sorter) {
if(sorter.initialConfig.property == activeHeader.dataIndex) {
store.getSorters().remove(sorter)
}
}, this);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.