Search code examples
javascriptextjsextjs4sencha-architect

Wrong sort order in combobox with extjs

I'm having a data sort problem with a combobox.

Data source is JSON. Data is sorted in sql. Resulting set(in sql) and JSON result looks fine:

{"rows":[{"id":"TOT","txt":" Alle diagnosen"},{"id":"612","txt":"(acute) bloeding distale tract. digestivus*"},{"id":"042","txt":"(auto)-intoxicatie"},{"id":"402","txt":"(benigne) peptisch ulcus*"},{"id":"10","txt":"(bij)niertumor"},{"id":"652","txt":"(chorio)retinitis.. etc etc

Resulting data looks fine(=same sort order as JSON result) when I inspect the store with with firebug:

enter image description here

However, the resulting combobox has a different(wrong) sorting(first 2 are ok):

enter image description here

It is not sorted on the display value, nor on the id value. There is no sorter added anywwhere.

Combo:

{
    xtype: 'combobox',
    id: 'ComboDiag',
    itemId: 'ComboDiag',
    width: 280,
    fieldStyle: '',
    name: 'ComboDiag',
    fieldLabel: 'Diagnose',
    labelWidth: 90,
    displayField: 'txt',
    queryMode: 'local',
    store: 'ComboDiagStore',
    typeAhead: true,
    valueField: 'id',
    listeners: {
        render: {
            fn: me.onComboDiagRender,
            scope: me
        }
    }
}

Store:

Ext.define('AppPitDash.store.ComboDiagStore', {
    extend: 'Ext.data.Store',
    alias: 'store.ComboDiagStore',
    requires: [
        'AppPitDash.model.ComboDiagModel'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            storeId: 'ComboDiagStore',
            model: 'AppPitDash.model.ComboDiagModel',
            proxy: {
                type: 'ajax',
                url: './php/get-data-diagCombo.php',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            }
        }, cfg)]);
    }
});

Model:

Ext.define('AppPitDash.model.ComboDiagModel', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'id'
        },
        {
            name: 'txt'
        }
    ]
});

I'm using Sencha Architect 2, first time.

This is rather an annoyance than a showstopper, but still help would be appreciated.

Solution

  • Try adding remoteSort: true to callParent method in store definition.