Geek Answers Handbook

How to remotely sort an Ext grid column that displays a nested object?

A simple question is here, and I'm really surprised that I can not find the answer to it anywhere.

I have the following product model:

Ext.define('Product', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'}, {name: 'manufacturer', type: 'auto'}, // ie nested object literal ], });

As you can see, the product has an embedded object inside it containing information about the manufacturer (identifier, name, description, etc.).

I show products in Ext.grid.Panel, for example:

 Ext.create('Ext.grid.Panel', { title: 'Products', ... remoteSort: true, columns: [ {text: 'Id', dataIndex: 'id', sortable: true}, {text: 'Name', dataIndex: 'name', sortable: true}, {text: 'Manufacturer', dataIndex: 'manufacturer', sortable: true, renderer: function(manufacturer) { return manufacturer.name; // render manufacturer name } }, ], });

As you can see, all three columns are configured for sorting, and I use remote sorting. This works for the first two columns, but the third column (producer) gives me problems.

For example, when a user sorts a grid by product name, Ext sends the following JSON to the server:

 { sort: [{ property: 'name', direction: 'ASC' }] }

This is good, because the server knows, just sort by each name property.

But when the user sorts the grid by manufacturer, the JSON sent:

 { sort: [{ property: 'manufacturer', direction: 'ASC' }] }

Since the producer is an object, this does not give the server any idea what kind of producer property it should sort! Is this a manufacturer identifier? Or is it the name of the manufacturer? Or something else?

For my grid, since I display the name of the manufacturer, I would like to sort it by name. But I see no way to tell the server this. And of course I don’t want my server to just sort the manufacturer name all the time.

If JSON was sent this way, it would be ideal:

 { sort: [{ property: 'manufacturer.name', direction: 'ASC' }] }

Unfortunately, Ext doesn't seem to do this (?). So what is the solution?

+4
source share
1 answer

Ok, I asked Sencha Forums and got an answer. It looks like you can override getSortParam() in the column configuration. Example:

 columns: [ ... { header: 'Manufacturer', dataIndex: 'manufacturer', sortable: true, renderer: function(manufacturer) { return manufacturer.name; // render manufacturer name }, getSortParam: function() { return 'manufacturer.name'; }, } ... ]

This will send the perfect JSON, which I described in my OP. Now I just need my server to parse this correctly! :)

+7
source

More articles:


All Articles