Extjs Comobobox duplicate display field not allowed to be set? - extjs

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

Having same display value for different rows in combo box is confusing at least for the end user. Why don't you create a calculated field like this:
fields: [
{ name: 'id', type: 'int' },
{ name: 'description', type: 'string' },
{ name: 'display', type: 'string', convert: function(v, r) {
return r.get('id') + ' ' + r.get('description');
}}
}]
And use this display as your displayField.

Answer 2

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.