Help on override grid sort

[delagoutte]

Hello,

i need expert extjs

By default unigui gridcolumn sort have only 2 state when we click on column title : ascending, descending.

i needed 3 state : ascending, descending; none

 

for this  i use this code to add this feature to a grid :

if AddCancelSort then
      begin
      aGrid.ClientEvents.ExtEvents.Values['viewready'] := aGrid.ClientEvents.ExtEvents.Values['viewready']+
      ''+#13#10+
      '    me.getColumnIndex = function(grid, dataIndex, delta) {'+#13#10+
      '        gridColumns = grid.headerCt.getGridColumns();'+#13#10+
      '        for (var i = 0 + delta; i < gridColumns.length; i++) {'+#13#10+
      '            if (gridColumns[i].dataIndex == dataIndex) {'+#13#10+
      '                return i;'+#13#10+
      '            }'+#13#10+
      '        }'+#13#10+
      '    };'+#13#10+
      '    '+#13#10+
      '    me.findColumnIndex = function(columns, dataIndex) {'+#13#10+
      '        var index;'+#13#10+
      '        for (index = 0; index < columns.length; ++index) {'+#13#10+
      '            if (columns[index].dataIndex == dataIndex) {'+#13#10+
      '                break;'+#13#10+
      '            }'+#13#10+
      '        }'+#13#10+
      '        return index == columns.length ? -1 : index;'+#13#10+
      '    };'+#13#10+
      ''+#13#10+
      '    me.setSortNumbers = function() {'+#13#10+
      {$IFDEF DEBUG}
     '                     console.log("'+agrid.Name+'-setSortNumbers"); '+#13#10+
     {$ENDIF}
      '        var sCount = me.store.sorters.getCount();'+#13#10+
      ''+#13#10+
      '        me.el.select(''small.sortnumber'').elements.forEach(function(el) {'+#13#10+
      '            $(el).remove()'+#13#10+
      '        });'+#13#10+
      ''+#13#10+
      '        me.store.sorters.items.forEach(function(s) {'+#13#10+
      '            var indx, col;'+#13#10+
      '            indx = me.getColumnIndex(me, parseInt(s._property), parseInt(delta));'+#13#10+
      ''+#13#10+
      '            if ( me.columnManager.columns != null){'+#13#10+
      '            var col = me.columnManager.columns[indx];'+#13#10+
      '            if (col) col.el.select(''.x-column-header-text'').elements[0].innerHTML += ''<small class="sortnumber"> ('' + sCount + '')</small>'';'+#13#10+
      '            sCount--;'+#13#10+
      '            }'+#13#10+
      '        });'+#13#10+
      '    };'+#13#10+
      ''+#13#10+
      '    me.resetSort = function() {'+#13#10+
      '        var activeIndx = currentHeaders.activeHeader.dataIndex;'+#13#10+
      '        var i = 0;'+#13#10+
      '        var sortersCount = me.store.sorters.items.length;'+#13#10+
      '        me.store.sorters.items.forEach(function(s) {'+#13#10+
      '            if (s._property === activeIndx) {'+#13#10+
      '                removeIndx = i;'+#13#10+
      '                return false;'+#13#10+
      '            };'+#13#10+
      '            i++;'+#13#10+
      '        });'+#13#10+
      ''+#13#10+
      '        if (removeIndx != -1) {'+#13#10+
      '            me.store.sorters.removeAt(removeIndx);'+#13#10+
      '            if (sortersCount > 1) {'+#13#10+
      '                me.store.load();'+#13#10+
      '            } else {'+#13#10+
      '                ajaxRequest(me, ''sortClearAll'', []);'+#13#10+
      '                me.store.load();'+#13#10+
      '            };'+#13#10+
      ''+#13#10+
      '            me.headerCt.setSortState();'+#13#10+
      '            me.setSortNumbers();'+#13#10+
      '        };'+#13#10+
      '    };'+#13#10+
      ''+#13#10+
      '    Ext.override(Ext.grid.column.Column, {'+#13#10+
      '        sort: function(a) {'+#13#10+
      '            var me = this;'+#13#10+
      '            var grid = me.up(''tablepanel'');'+#13#10+
      '            var ds = grid.store;'+#13#10+
      ''+#13#10+
      '            if (a==null && this.el.hasCls(''x-column-header-sort-DESC'')) {'+#13#10+
      '                var removeIndx = -1;'+#13#10+
      '                var activeIndx = me.getSortParam();'+#13#10+
      '                var i = 0;'+#13#10+
      '                var sortersCount = ds.sorters.items.length;'+#13#10+
      '                ds.sorters.items.forEach(function(s) {'+#13#10+
      '                    if (s._property === activeIndx) {'+#13#10+
      '                        removeIndx = i;'+#13#10+
      '                        //return false;'+#13#10+
      '                    };'+#13#10+
      '                    i++;'+#13#10+
      '                });'+#13#10+
      ''+#13#10+
      '                if (removeIndx != -1) {'+#13#10+
      '                    ds.sorters.removeAt(removeIndx);'+#13#10+
      '                    if (sortersCount > 1) {'+#13#10+
      '                        ds.load();'+#13#10+
      '                    } else {'+#13#10+
      '                        ajaxRequest(grid, ''sortClearAll'', []);'+#13#10+
      '                        ds.load();'+#13#10+
      '                    };'+#13#10+
      ''+#13#10+
      '                    grid.headerCt.setSortState();'+#13#10+
      '                };'+#13#10+
      '            } else {'+#13#10+
      '                this.callParent(arguments);'+#13#10+
      '            };'+#13#10+
      '            grid.setSortNumbers();'+#13#10+
      '        }'+#13#10+
      '    });'#13#10;
      end;

this code works fine since many years but i just realize there is a failure in my code.

 in the end of this code i use Ext.override(Ext.grid.column.Column, {'+#13#10+.....

 

but with this code i override all grids in my app and not only the grid that i want add the feature.

 

how can i rewrite this part of code for not using Ext.override(Ext.grid.column.Column, {.... and apply only for the designated grid ?

[Sherzod]

5 minutes ago, delagoutte said:

how can i rewrite this part of code for not using Ext.override(Ext.grid.column.Column, {.... and apply only for the designated grid ?

Hello Jean,

You can try just using reconfigure function I think, something like this:

columns.forEach... or columns[xx].sort = ...

[delagoutte]

i try with is

    if AddCancelSort then
    begin
      aGrid.ClientEvents.ExtEvents.Values['reconfigure']:=
        aGrid.ClientEvents.ExtEvents.Values['reconfigure']+
        ' for (let i = 0; i<columns.length;i++){ '+
        '        columns[i].sort= function(a) {'+#13#10+
        '            var me = this;'+#13#10+
        '            var grid = me.up(''tablepanel'');'+#13#10+
        '            var ds = grid.store;'+#13#10+
        ''+#13#10+
        '            if (a==null && this.el.hasCls(''x-column-header-sort-DESC'')) {'+#13#10+
        '                var removeIndx = -1;'+#13#10+
        '                var activeIndx = me.getSortParam();'+#13#10+
        '                var i = 0;'+#13#10+
        '                var sortersCount = ds.sorters.items.length;'+#13#10+
        '                ds.sorters.items.forEach(function(s) {'+#13#10+
        '                    if (s._property === activeIndx) {'+#13#10+
        '                        removeIndx = i;'+#13#10+
        '                        //return false;'+#13#10+
        '                    };'+#13#10+
        '                    i++;'+#13#10+
        '                });'+#13#10+
        ''+#13#10+
        '                if (removeIndx != -1) {'+#13#10+
        '                    ds.sorters.removeAt(removeIndx);'+#13#10+
        '                    if (sortersCount > 1) {'+#13#10+
        '                        ds.load();'+#13#10+
        '                    } else {'+#13#10+
        '                        ajaxRequest(grid, ''sortClearAll'', []);'+#13#10+
        '                        ds.load();'+#13#10+
        '                    };'+#13#10+
        ''+#13#10+
        '                    grid.headerCt.setSortState();'+#13#10+
        '                };'+#13#10+
        '            } else {'+#13#10+
        '                this.callParent(arguments);'+#13#10+
        '            };'+#13#10+
        '            grid.setSortNumbers();'+#13#10+
        '        }'+#13#10+
        '}'+#13#10;
    end;

but with this when i click on clumn header i have this error in console

Uncaught TypeError: can't access property "apply", b is undefined
    callParent ExtJS
    sort http://localhost:8079/:1755
    ExtJS 26
    afterRender http://localhost:8079/uni-1.90.0.1564/ext-unicommon-min.js:9
    ExtJS 4
    constructor http://localhost:8079/uni-1.90.0.1564/ext-unicommon-min.js:9
    ExtJS 25

hav you got an idea of the reason for this error ?

[Sherzod]

Sorry, then we need to reproduce this in a test case and check.

[delagoutte]

the error comes from this line :

this.callParent(arguments);'+#13#10+
        

no idea without test case ?

[Sherzod]

35 minutes ago, delagoutte said:

this.callParent(arguments);'+#13#10+

Try to remove it.

[delagoutte]

no error but... the sort no longer works.

 

i try do a test case

[delagoutte]

You could find a test case with the problem (line 165 of main.pas)

in source code i add

- old method AddFunctionToGrid that works but override all grid not only specified grid

-new code AddFunctionToGridV2 that should not override all grid but only the specified grid but sort no longer works

GridColumnSort.zip

[Sherzod]

5 hours ago, delagoutte said:

- old method AddFunctionToGrid that works but override all grid not only specified grid

Okay, I think you can try this approach:

1. 

...
Ext.override(Ext.grid.column.Column, {
...
if (grid.isCustomGrid && a==null && this.el.hasCls(''x-column-header-sort-DESC'')) {
...

2. 

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniDBGrid1.JSInterface.JSConfig('isCustomGrid', [True]); //<----------

  //old method works but it is override all grid not only UniDBGrid1
  AddFunctionToGrid(UniDBGrid1,true,True,true);

  //New method we use reconfigure but sort no longerworks
  //AddFunctionToGridV2(UniDBGrid1,true,True,true);
end;

 

[delagoutte]

interesting approach🙃

it works.

thanks a lot