Javascript – Extjs sorting store by alphanumeric field

extjsextjs4javascript

I've got a bunch of records whose names are like "Itemtype #", and when they are outputted into a tree view, they're sorted incorrectly, like so:

Item 1
Item 10
Item 11
Item 12
Item 13
Item 2
Item 3
Item 4

My model fields are defined as follows, and I am sorting on "Name":

fields: [
  { name: 'Id', defaultValue: 0, type: 'int', mapping: 'Id' },
  { name: 'Name', defaultValue: '', type: 'string', mapping: 'Name', sortType: Ext.data.SortTypes.asUCString },
  { name: 'Type', defaultValue: 0, type: 'int', mapping: 'Type' },
  { name: 'CreationDate', type: 'date', mapping: 'CreationDate' }
],

Can anybody point me in the right direction? I'm using extjs 4.0.5

Best Answer

In store you have to set up how the data will display by sorters property:

var store = Ext.create('Ext.data.JsonStore', {
  .
  .
  .
  remoteSort: false, //true for server sorting
  sorters: [{
     property: 'Name',
     direction: 'DESC' // or 'ASC'
   }],
  .
  .
  .

})

Related Solutions

Javascript – Sorting an array of objects by property values

Sort homes by price in ascending order:

homes.sort(function(a, b) {
    return parseFloat(a.price) - parseFloat(b.price);
});

Or after ES6 version:

homes.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));

Some documentation can be found here.

For descending order, you may use

homes.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));

Javascript – Sorting object property by values

Move them to an array, sort that array, and then use that array for your purposes. Here's a solution:

var maxSpeed = {
    car: 300, 
    bike: 60, 
    motorbike: 200, 
    airplane: 1000,
    helicopter: 400, 
    rocket: 8 * 60 * 60
};
var sortable = [];
for (var vehicle in maxSpeed) {
    sortable.push([vehicle, maxSpeed[vehicle]]);
}

sortable.sort(function(a, b) {
    return a[1] - b[1];
});

//[["bike", 60], ["motorbike", 200], ["car", 300],
//["helicopter", 400], ["airplane", 1000], ["rocket", 28800]]

Once you have the array, you could rebuild the object from the array in the order you like, thus achieving exactly what you set out to do. That would work in all the browsers I know of, but it would be dependent on an implementation quirk, and could break at any time. You should never make assumptions about the order of elements in a JavaScript object.

var objSorted = {}
sortable.forEach(function(item){
    objSorted[item[0]]=item[1]
})

In ES8, you can use Object.entries() to convert the object into an array:

const maxSpeed = {
    car: 300, 
    bike: 60, 
    motorbike: 200, 
    airplane: 1000,
    helicopter: 400, 
    rocket: 8 * 60 * 60
};

const sortable = Object.entries(maxSpeed)
    .sort(([,a],[,b]) => a-b)
    .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});

console.log(sortable);

In ES10, you can use Object.fromEntries() to convert array to object. Then the code can be simplified to this:

const maxSpeed = {
    car: 300, 
    bike: 60, 
    motorbike: 200, 
    airplane: 1000,
    helicopter: 400, 
    rocket: 8 * 60 * 60
};

const sortable = Object.fromEntries(
    Object.entries(maxSpeed).sort(([,a],[,b]) => a-b)
);

console.log(sortable);

Best Answer

Related Solutions

Javascript – Sorting an array of objects by property values

Javascript – Sorting object property by values

Related Topic