Question

I’m a newbie using Extjs 4.07. I have created a combobox (remote) queryMode. The combobox displays a list of courses. However, the institution I work for recently recoded their entire courses. So, I end up having two records with the same display field. My JSON looks like this:

{"result":[{"id":"90223","code":"CM12","description":"Introduction to C Programming","creditHours":"3.00","numberOfLabs":"0","contactHours":null,"chargeableCredits":null},
{"id":"2094","code":"CMPS1302","description":"Introduction to C Programming","creditHours":"3.00","numberOfLabs":"0","contactHours":null,"chargeableCredits":null}],"total":2}

the display field is description and the value field is id. When I select one of the items in the combobox and submit everything works fine. The problem occurs if later I selected the incorrect course and select the other one.

I have tried setting the idProperty: ‘id’ but to no avail. When I submit the form the value that will be sent is the one that was selected first after. Note: This only happens for duplicate course descriptions, everything else works fine.

here is some code to help explain the problem:

Ext.define('SIS.model.ManageCourse', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'code', type: 'string'},
        {name: 'description', type: 'string'},
        {name: 'creditHours', type: 'float'},
        {name: 'contactHours', type: 'float'},
        {name: 'chargeableCredits', type: 'float'},
        {name: 'numberOfLabs', type: 'float'},
        {name: 'selected', type: 'bool'} //for update course pre-requisites
    ]
});


Ext.define('SIS.store.ClassCourse', {
    extend: 'Ext.data.Store',
    autoLoad: true,
    autoSync: true,
    model: 'SIS.model.ManageCourse',
    pageSize: 7,
    remoteFilter: true,
    idProperty: 'id',
    proxy: {
        type: 'ajax',
        api: {
            read: 'course/select'
        },
        reader : {
            type : 'json',
            root : 'result',
            totalProperty  : 'total',
            successProperty : 'success'
        }
    }
});

Ext.define('SIS.view.class.ClassCourseCombo', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.ClassCourseCombo',
    name: 'courseId',
    fieldLabel: 'Course',
    store: 'ClassCourse',
    queryMode: 'remote',
    pageSize: 7,
    displayField: 'description',
    valueField: 'id',
    allowBlank: false,
    hideTrigger: true,
    forceSelection: true,
    minChars: 1,
    lazyInit: false,
    listConfig: {
        getInnerTpl: function () {
            return '<div class="combo-header">{description}</div>\
                <div class="combo-item">{code}</div>';
        }
    }
});

Answer 1

This is a bug identified since version 3 I found the solution in sencha forum provided by Condor.

I changed the line

if(val.length > 0 && val != this.emptyText)

with

if(val.length > 0 && val != this.emptyText && typeof this.emptyText != 'undefined')

when there is no emptyText defined the result is just as if forceSelection was set to false even when explicitly set to true. small fix.