Multi-sort plugin

[JIMECKELS]

This is my first plugin, and rather simple, but figured I would share it for feedback, and perhaps others might find it helpful.

The goal of this plugin was to allow a grid to have multi-sorting by holding shift while clicking columns. To remove the sorting, click a column by itself to sort by only that column.

I have a separate plugin for removing sorting altogether, but that's something a bit more muddled as it shares alot of other stuff.


Any feedback is welcome.

/**
 * Plugin that enables a mulit-sorting by holding shift and clicking column headers<br>
 *
 * @author Ing. Jim Eckels
 * @version 1.0 (tested against 4.2.1)
 * @updated 2013-04-20 by Jim Eckels (jeckels@parkcitygroup.com)
 * Initial draft
 * @updated 2013-05-03 by Jim Eckels (jeckels@parkcitygroup.com)
 * Use header tooltip to display what the current sort order applied is
*/
Ext.define('Ext.ux.grid.MultiSort', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.multisort',
    mixins: {
        observable: 'Ext.util.Observable'
    },
    
    // @public
    showToolTip: true,
    sortTipText: 'Sorted by:',
    
    // @private
    _sortCols: [],
    _grid: undefined,
    _toolTip: undefined,
    
    init: function(grid) {
        var me = this;

        grid.on({
            beforedestroy: me.unsetup,
            reconfigure: me.resetup,
            scope: me
        });

        me.setup(grid);
    },
    
    // private
    setup: function(grid) {
        var me = this;
        me._grid = grid;
        
        Ext.each(me._grid.headerCt.getGridColumns(), function (c) {
            c.sortable = false;
            c.on('headerclick',me.onColumnClicked, me);
        }, me);
    },
    
    onColumnClicked: function(header, col, e, t, eOpts){
        var me = this,
            sorters = [];
        
        e.stopEvent();
        
        if (e.shiftKey) {
            Ext.each(me._sortCols, function (c) {
                if(c.sortState) {
                    if( c.id !== col.id ) {
                        sorters.push(
                            {
                                property: c.dataIndex,
                                direction: c.sortState
                            }
                        );
                    }
                }  
            });
        } else {
            Ext.each(me._sortCols, function (c) {
                if(c.sortState) {
                    // if its not the column that was clicked OR, we were previously multi-sorting, clear sortState and remove icons
                    if( (c.id !== col.id) || (me._sortCols.length > 1) ) {
                        c.setSortState(undefined, true, true);
                    }
                }
            });
            me._sortCols = [];
        }
        
        sorters.push(
            {
                property: col.dataIndex,
                direction: me.getDirection(col)
            }
        );
        me.addSortColumn(col);
            
        me._grid.store.sort(sorters);
        
        me.createToolTip();
    },
    
    addSortColumn: function(col){
         var me = this, 
            exists = false,
            colToMove = undefined;

        Ext.each(me._sortCols, function (c) {
            if( c.id === col.id ) {
                colToMove = c
                exists = true;
            }
        });
        
        if(colToMove){
            Ext.Array.remove(me._sortCols,colToMove);
            Ext.Array.push(me._sortCols,colToMove);
        }
        
        if( !exists ) {
            me._sortCols.push(col);
        }
    },
    
    getDirection: function(col){
        var dir;
        
        dir = (col.sortState == 'ASC' ) ? 'DESC' : 'ASC';
        
        col.setSortState(dir, true, true);
        
        return dir;
    },
    
    createToolTip: function(){
        var me = this,
            tip = '';
        
        if( me.showToolTip ) {
            me.clearToolTip();

            Ext.each(me._sortCols, function (c) {
                tip += '<br/>' + c.text;
            });

            me._toolTip = Ext.create('Ext.tip.ToolTip',{
                target: me._grid.headerCt.el,
                html: me.sortTipText + tip,
                renderTo: Ext.getBody()
            });
        }
    },
    
    // @public
    clearToolTip: function () {
        var me = this;
        if(me._toolTip) {
            me._toolTip.setTarget(undefined);
            Ext.destroy(me._toolTip);
        }
    },
    
    // private
    unsetup: function(grid) {
        var me = this;
        
        me.clearToolTip();
        me._grid = null;
    },
    
    resetup: function (grid) {
        this.unsetup(grid);
        this.setup(grid);
    }

});

[slemmon]

Thanks for sharing!

[4lenour]

how to implement this plugin

[JIMECKELS]

on a grid, add

requires: [
    'Ext.ux.grid.MultiSort'
],
plugins: [
    { ptype: 'multisort' }
],
...

That's it.

You should now be able to use shift-clicks to add sorting depth. Clicking a column without shift resets to sort by that column only