1. #1
    Sencha User James Quall's Avatar
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    0
    James Quall is on a distinguished road

      0  

    Default Answered: How to remotely sort an Ext grid column that renders a nested model?

    Answered: How to remotely sort an Ext grid column that renders a nested model?


    I asked this question on StackOverflow, but thought it might be better to try here.

    I have two models, Product and Manufacturer:

    Code:
    Ext.define('Manufacturer', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id', type: 'int'},
            {name: 'name', type: 'string'},
        ],
    });
    
    Ext.define('Product', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id', type: 'int'},
            {name: 'name', type: 'string'},
            {name: 'manufacturer', type: 'Manufacturer'}, // i.e. nested object
        ],
    });
    I display Products in an Ext.grid.Panel, like so:

    Code:
    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 to be sortable, and I am using remote sorting. This works for the first two columns, but the third column (manufacturer) is giving me trouble.

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

    Code:
    { sort: [{property: 'name', direction: 'ASC'}] }
    This is fine, because the server knows to simply sort by each Product's name property.

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

    Code:
    { sort: [{property: 'manufacturer', direction: 'ASC'}] }
    Obviously, this does not give the server any idea which property of the manufacturer's it should sort by! Is it the manufacturer's id? Or is it it's name? Or something else?

    For my grid, since I render the manufacturer's name, I'd like to sort it by name. But I see no way to tell the server this. And I certainly don't want to make my server just sort by the manufacturer's name all the time.

    If the JSON was sent like this it would be ideal:

    Code:
    { sort: {[property: 'manufacturer.name', direction: 'ASC'}] }
    Sadly, Ext does not seem to do that (?). So, what's the solution?

  2. I have a grid where I use a fake dataIndex to render the grid column in a user friendly way. As you've found out, by default, the grid will sort by the dataIndex which, in cases like yours and mine, are not ideal...in my case, the grid would send through a sort parameter for a column that, server side, does not actually exist.

    So what I do is simply override getSortParam() on the column. This allows me to specify the property by which I'd like to remotely sort the grid...in my case, I use colons (e.g., Manufacturer:Name), but the concept is the same.

  3. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    86
    Answers
    31
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      1  

    Default


    I have a grid where I use a fake dataIndex to render the grid column in a user friendly way. As you've found out, by default, the grid will sort by the dataIndex which, in cases like yours and mine, are not ideal...in my case, the grid would send through a sort parameter for a column that, server side, does not actually exist.

    So what I do is simply override getSortParam() on the column. This allows me to specify the property by which I'd like to remotely sort the grid...in my case, I use colons (e.g., Manufacturer:Name), but the concept is the same.

  4. #3
    Sencha User James Quall's Avatar
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    0
    James Quall is on a distinguished road

      0  

    Default


    Thanks, that's exactly what I was looking for.

Thread Participants: 1

Tags for this Thread