CODEWITHSUNDEEP
javascriptextjsextjs4
Yimin Rong
Yimin Rong

Reputation: 2027

ExtJS 5.0 - override to provide custom ordering on a grid column

A grid control column is ordering based on name which is a combined field of first + ' ' + last. The client wants to order by last + ', ' + first. I am not permitted to change the existing code, can only use overrides.

Based on the results of web searching, I think using sortType to transform the input value is the least intrusive approach. But I'm not sure how to plug it in.

I think sortType works on data fields, so in an initComponent overload can I get access to what I need? For example, this is how I override in the view to change the rendering:

initComponent: function() {
    this.callParent([]);
    this.columns[0].renderer =
        function(value, metaData, record, rowIdx, colIdx, store, view) {
            var result = '';
            if (!Ext.isEmpty(record.data) && !Ext.isEmpty(record.data.details)) {
                var details = record.data.details;
                // value == details.name is 'first last', won't be using that
                result = details.last + ', ' + details.first;
            }
            return result;
        };
}

Can I get access to the details.name definition from here to override sortType? Will agree that this isn't the best approach, because I'll have to do some parsing of name to split it and then stick it back together. And that's going to have issues for those with multiple first and/or last names.

An alternate approach is to overload doSort but if I don't have access to details.first and details.last, it won't be any better than sortType. I saw one example of implementing doSort and it looks very complicated. Does anyone know of some detailed documentation for doSort?

Upvotes: 2

Views: 497

Answers (2)

Alexander
Alexander

Reputation: 20224

The problem is that sortType does not take the whole record, and it is applied directly to columns[0].dataIndex, without any possibility to interfere. And you can only use string manipulation if you are sure where first name ends and last name starts:

this.columns[0].sortType = function(value) {
    var spl = value.split(' ');
    return value[1] + ', ' + value[0];
}

Of course this will run into issues with Names like "Carl Friedrich Theodor Wilhelm Freiherr von und zu Guttenberg" and the like, even "George W. Bush" would be an issue.

The better way is to introduce another field into the model, something along the lines of

MyApp.model.Resource.getFields().push(Ext.create('Ext.data.Field',{
    name:"LastFirst",
    convert:function(v,rec) {
        return rec.get("last")+', '+rec.get("first")
    }
}));

This change does not affect existing model instances, so you would have to do it before any model instance is created.

This would allow you to set columns[0].dataIndex="LastFirst", scrap the renderer change, and also get useful sorting.

Upvotes: 1

Illia Olenchenko
Illia Olenchenko

Reputation: 128

It is difficult to give some code or a stub, but i found some answers about ordering. As i know ext 4 have sortType on a stores. So what you actually need is to create custom sortType to your store (and to create a store if you haven`t it yet).
Ext have ways to order things in a grid, use initComponent for other stuff.
sortType looks like this

Upvotes: 0

Related Questions