General function and Module customization system (CFCMMS)-042 module grid sorting and filtering

042 sorting and filtering of the module grid a sort grid interface sort can be done directly by clicking on the column header, this is very convenient. But there are two more questions to solve: You cannot cancel the sorting to the default, and single and multi-field sorting cannot be easily toggled. To solve these two functions, a SplitButton button is added to the front of the Pagingtoolbar to control these two operations.

As you can see in the picture above, there is a new button, some of the menus below to control the sorting of the grid. and displays the currently sorted fields as well as the order. The following is the source code for this control, which should be applied to any grid. is not dedicated to this system.

/** * * Grid inside control sort of some functions, mainly have single field sort, multi-field sort, clear sort field * */ext.define (' App.module.widget.GridSortButton ', {extend: ' App.ux.Bu Ttontransparent ', alias: ' Widget.gridsortbutton ', iconcls: ' X-fa fa-sort-amount-asc ', tooltip: ' Sort Settings ', listeners: { Menushow:function (Button, menu, eopts) {var Grid = button.up (' grid '), store = Grid.getstore (); for (var i = Menu.items.le Ngth-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: ' Restore default sort ', handler: function (button) {var store = button.up (' grid '). GetStore (); Store.getsorters (). RemoveAll (); Store.load ();}}, '-', { Text: ' Single field sort ', 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: ' Multi-field sort ', xtype: ' Menucheckitem ', group: ' SortType ', handler:function (button {var Grid = button.up (' grid '), store = Grid.getstore (); grid.multicolumnsort = True;if (grid.lockedgrid) {Grid.lockedgri D.multicolumnsort = True;grid.normalgrid.multicolumnsort = True;}}, '-', {text: ' current sort '}]},initcomponent:function () {T His.callparent (arguments);}});

Second, the screening conditions of display and removal. The grid column header provides a place to filter settings, but neither display nor cleanup is convenient, and a button is made to manage these two functions.

After selecting some filters, it will be shown in the button below.

/** * * Grid inside control Some functions of filtering, display filter condition, clear filter condition * */ext.define (' App.module.widget.GridFilterButton ', {extend: ' App.ux.ButtonTra Nsparent ', alias: ' Widget.gridfilterbutton ', iconcls: ' X-fa fa-filter ', tooltip: ' Filter Settings ', listeners: {Menushow:functio N (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: ' Clear all Filters ', Iconcls: ' X-fa fa-eraser ', handler:function (button) {button.up (' grid '). Filters.clearfilters ()}}, '- ', {text: ' Current filter Condition '}]},initcomponent:function () {this.callparent (arguments);},changeoperatortotext:function ( operator) {switch (operator) {case ' GT ': Return ' is greater than '; case ' lt ': return ' less than '; case ' eq ': return ' equals '; case ' like ': Return ' contains text ' ;} return operator;}});

General function and Module customization system (CFCMMS)-042 module grid sorting and filtering