Results 1 to 3 of 3

Thread: Forcing SubSort on click of Grid header?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Vote Rating

    Default Forcing SubSort on click of Grid header?

    I'm new to ExtJs, so forgive me if I don't have all the jargon down.

    I've got a grid (Ext.grid.Panel) and want the columns to be sortable. Simple enough. However, one of the columns is a date column, and no matter what column the user clicks on, I want to FORCE a sub-sort on the date column.

    For instance: If I click on the "name" column, it sorts the grid by name, ascending. But I want to make it sort by name asc / date desc.

    I've tried numerous ideas I've found online, and I've come close, but nothing seems to work exactly. If I intercept the headerclick event and call grid.sort() manually, it either is ignoring my call, or is re-sorting by the just the single clicked column after my call.

    If I set sortable to false, I can still call the sort in the headerclick event, but then I lose the visible sort direction triangle in the header row (which I still want).

    Can anyone help?? I'm getting desperate! Thanks.

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Using the UI, it's only going to be single sort.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Vote Rating

    Default Working now

    Actually, I figured it out. In a nutshell, I overrode the doSort method for each column I defined with a function that does the sort with my extra sorter (subsort column) tacked on.

    for instance, for my first column, called "Poster", if the user clicks the header, this happens:

    doSort: function (state) {           
                     var g = this.up('grid');
                     var ds =;
                                 property: 'Poster',
                                 direction: state
                     }, {             
                                 property: 'Date',
                                 direction: 'DESC'
    It sorts by "Poster" in whatever the current direction should be, AND subsorts by the "Date" column descending.

    I'll try to put together a simple example on when I get a chance and share it here. Hopefully this will help others.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts