Default column for sort in grid?

I am wondering how do you make a column as the sorted column SortDir.ASC or SortDir.DESC by default when the grid first load?

Are you talking about making the little triangle thingy appear or to set the default sorting?

If the latter, that is set when your grid makes the call to your, say, RpcProxy. In our server side code, we get a FilterPagingLoadConfig object, convert that to a SearchCriteria and pass that along to our business logic and DB routines. This method returns a ListLoadResult object which contains, amongst other things, the SortInfo (which contains the sort direction).

the little triangle thing, i know how to get the sort info however when the grid first load, i want it to be able to have it sorted in a certain way by default.

i tried to mess with the store but that caused arrow to appear but wacked the server side sorting.

I don't know of a way to automagically make that arrow appear, but it sounds like you found one. The only thing you'll need to do is account for the initial request to the server from the grid for data.

In our case, the initial request from the grid has empty SortInfo so we use that as a smoke screen to discern between the initial and subsequent requests. In our case, however, we do not care about the missing triangle. I would think that good UI design dictates that the first column is sorted by default but clearly, every use case is different.

I too would be interested to know how to programatically set the sort column to the grid, in a way that also makes the little triangle show up.

Manipulating my loadProxy or my server side code to manipulate the sorting is not a problem, but that doesn't give me the little triangles

Try to use:
store.setDefaultSort("column_id", SortDir.ASC);

I'm using GXT 3.0.1, and the ListStore implementation that I get when I call grid.getStore() does not have a method called "setDefaultSort"..

Here i have made a workaround for this

As i have binded a store to the grid that was remote sorted, the grid don't show that little triangle in the column, so i go down to the specific column object, in my "initComponent" code of my view and do this trick calling this method on the column :

setSortState('DESC', undefined, true)

You can change the DESC for ASC if you want... but keep the "true" parameter... because without that, the grid will try do load the store as if an user clicked in the header of the grid to sort...

Hope this helps...
Marcel Portela

You can do it like this

Define the store with any default "sorters"

Code:

---

        // ---------------------------------------------------------------
        // Asignar el store (Forzamos la creación de un objeto nuevo)
        // ---------------------------------------------------------------
        me.store = Ext.create('ispgest.store.dominios', {
            storeId: Ext.id(),
            // Hay que filtrar la información por la empresa seleccionada
            filters: [{
                id: 'domi_empresa_id',
                property: 'domi_empresa_id',
                value: ispgestApp.empresaActualId
            }],
            sorters: [{
                property: 'domi_nombre',
                direction: 'asc'
            }]
        });

---

In AfterRender event of the grid put this

Code:

---

...
    onAfterRenderGrid: function( grid, eOpts) {
        var me = this;

        // Procesos que se realizan cuando se acaba de crear/dibujar el control grid del mantenimiento   
       
        // Marcar la columna por la que el store tiene un "sorter" local (si lo tiene)
        var store = grid.getStore();
        if (store) {
            var storeSorters = store.getSorters();
            if (grid.columns.length>0 && storeSorters.length>0) {       
                Ext.each(grid.columns, function(column, index) {
                    if (grid.columns[index].dataIndex == storeSorters[0].property) {
                        grid.columns[index].setSortState(Ext.util.Format.uppercase(storeSorters[0].direction));
                    } else {
                        grid.columns[index].setSortState(null);
                    }
                });       
            }
        }
       
    }
...

---

@mportela and @maneljn, this is a GXT forum, and your response was for EXT JS. Please take a few seconds to look before posting. Thanks.

To get the arrow to display in the column header, see this link: http://www.sencha.com/forum/showthread.php?260264