Sort by hidden grid column

[Skippy1988]

Hello,

I have got a question about custom sorting a grid.
For better seaching data with a filter line I split an element in 3 parts:

var cm = new Ext.grid.ColumnModel( {
        columns:
    [{
        header: T,
        dataIndex: 'TNr',
        hidden: true
      {
        header: T1,
        dataIndex: 'TNr1',
        sortable: true
      },{
        header: T2,
        dataIndex: 'TNr2'
      },{
        header: T3,
        dataIndex: 'TNr3'
      }]
    }); 

To sort the grid this elements should be sorted internally using entries of the first (hidden) column.

If I use the following code, the data is sorted correctly but the sort icon is set to the hidden column.

store.on('datachanged',function(){
        if ( store.getSortState() && store.getSortState()['field'] != 'TNr' )
        {
            store.sort( 'TNr', store.getSortState()['direction'] );
        }
    }) 

I read a hint to a MixedCollection in a forum post but I didn't find a way to use the sort function of it.

My question in summary:
I want to hide a column that contains the sorting data. If I click on the header of a viewable column that contains a part of this data, the data should be sorted by the hidden column and the sort icon should by displayed on the viewable column.
Ho can I do this?

Best reagards

Mirko

[b3f3]

My question in summary:
I want to hide a column that contains the sorting data. If I click on the header of a viewable column that contains a part of this data, the data should be sorted by the hidden column and the sort icon should by displayed on the viewable column.
Ho can I do this?

I up this thread cause I need the same thing too.
Thanks

[darthwes]

OK, I thought this was obvious at first, but I understand now that it's a bit more complex. It's still not bad, though. Take a look @

listeners: {
	'headerclick': function(myGrid, myCol, myEvt) {
		var cm = myGrid.getColumnModel();
		//get col def
		var col = cm.getColumnById(cm.getColumnId(myCol));
		if(Ext.isDefined(col.sortAs)) {
			var store = myGrid.store;
			var cState = store.getSortState();
			var nState = {
				field: cm.getDataIndex(myCol),
				direction: 'ASC'
			};
			//flip asc to desc and back on multiple clicks
			if(Ext.isDefined(cState)) {
				if(cState.field == nState.field) {
					nState.direction = (cState.direction == 'DESC' ? 'ASC' : 'DESC');
				}
			}
			store.sort(col.sortAs, nState.direction);
			myGrid.getView().updateSortIcon(myCol, nState.direction);
			store.sortInfo = nState;
			return false;
		}
	}
},
colModel: new Ext.grid.ColumnModel({
	defaults: {
		width: 120,
		sortable: true
	},
	columns: [
		{dataIndex: 'fieldLabel', header: 'Label'},
		{dataIndex: 'value', header: "Value", sortAs: 't1'},
		{dataIndex: 't1', type: 'int', header: "Veloci", sortAs: 't2'},
		{dataIndex: 't2', type: 'int', header: "Raptor", hidden: true}
	]
}),

Like a friggin glove, no?

[b3f3]

Like a friggin glove, no?

Comme un gant putain, oui !
Like a friggin glove, yes !
Thank you very much darthwes !

[b3f3]

... but... in my JsonStore, I have remoteSort: true and I use a PagingToolbar.
Your function sort the store.
Do you have a solution?

[b3f3]

In fact, with the PagingToolbar, when I navigate on the next page, the sort is not preserved.

[darthwes]

Bonne.

Un: Without paging, the solution should work, the call to store.sort will use the store's defined "remoteSort" property to determine where to sort. See Ext.data.Store.Sort.

Deux: Paging. Just move the logic over to the store. Let the store's fields have sortAs on them. And decide how to sort in the store. That's a much more appropriate solution.

Trois: If remoteSort is set as true, then I don't see why it wouldn't work, granted it's not a perfect solution (overriding the store is).

Service!

[Skippy1988]

Hi,

the solution for my questions at the threads start is the following:

var cm = new Ext.grid.ColumnModel( {
    columns: [{
        dataIndex: 'tnr1'
      },{
        dataIndex: 'tnr2',
        sortable: false
      },{
        dataIndex: 'tnr3'
        sortable: false
      },{
        dataIndex: 'tnr4',
        sortable: false
      },{
        dataIndex: 'tnr5',
        sortable: false
      } (...)
  ],
  defaultSortable: true
} );

var store = new Ext.data.Store( {
  reader    : new Ext.data.XmlReader( {
    record       : 'row',
    totalProperty: 'total'
  },[
    {name: 'teile_sort', type: 'string'},
    {name: 'tnr1', type: 'string'},
    {name: 'tnr2', type: 'string'},
    {name: 'tnr3', type: 'string'},
    {name: 'tnr4', type: 'string'},
    {name: 'tnr5', type: 'string'}
  ] ),
  remoteSort: true
} );
store.on( 'beforeload', function( store, options ) {
    if ( options.params.sort == 'tnr1' )
    {
        options.params.sort = 'teile_sort';
    }
} );
store.on( 'load', function( store, records, options ) {
    if ( options.params.sort == 'teile_sort' )
    {
        var sc = grid.getView().sortClasses;
        var hds = grid.getView().mainHd.select( 'td' ).removeClass( sc );
        hds.item( 0 ).addClass( sc[options.params.dir == 'DESC' ? 1 : 0] );
        for ( var i=1; i<=4; i++ )
        {
            hds.item( i ).addClass( 'sort' );
        }
    }
} );

var grid = new Ext.grid.GridPanel( {
    cm: cm,
    store: store,
    viewConfig: {
        sortClasses: ['sort-asc','sort-desc','sort']
    }
} ); 

sort.JPG

Only the first of the five columns is sortable. If this one is clicked, the data set will be sorted by the internally data field 'teile_sort'. Additionally the first column gets the default sort class, the other 4 columns gets a new class with the same background colour but without a sorting arrow.

Best regards

Mirko