Extjs Comobobox重复显示字段不允许设置？答案

【问题标题】：Extjs Comobobox duplicate display field not allowed to be set?Extjs Comobobox重复显示字段不允许设置？
【发布时间】：2012-03-02 01:00:53
【问题描述】：

我是使用 Extjs 4.07 的新手。我创建了一个组合框（远程）查询模式。组合框显示课程列表。然而，我工作的机构最近重新编码了他们的整个课程。所以，我最终得到了两条具有相同显示字段的记录。我的 JSON 如下所示：

{"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}

显示字段是描述，值字段是id。当我选择组合框中的一项并提交时，一切正常。如果稍后我选择了错误的课程并选择了另一个课程，则会出现问题。

我尝试设置 idProperty: 'id' 但无济于事。当我提交表单时，将发送的值是之后首先选择的值。注意：这仅适用于重复的课程描述，其他一切正常。

这里有一些代码可以帮助解释问题：

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>';
        }
    }
});

【问题讨论】：

您能否用示例“如果我后来选择了错误的课程并选择了另一个课程，则会出现问题”来解释您的问题。令人困惑。
假设我想选择 Intro to C Programming (CM12) 但我错误地选择了 Intro to C Programming (CMPS1302)。即使我进行了更正，我的第一个选择也会被提交。但是，如果我选择另一门课程，例如。 Software Engineer，然后选择 Intro to C Programming (CMPS1302) 即可。

标签： extjs combobox form-submit

【解决方案1】：

组合框中的不同行具有相同的显示值至少对最终用户来说是令人困惑的。你为什么不创建一个这样的计算字段：

fields: [
  { name: 'id', type: 'int' },
  { name: 'description', type: 'string' },
  { name: 'display', type: 'string', convert: function(v, r) {
     return r.get('id') + ' ' + r.get('description');
  }}
}]

并使用此display 作为您的显示字段。

【讨论】：

我想过，但如果这样做了，那么在编辑组合时将不会返回任何结果，因为显示字段用作从服务器获取结果的查询。我决定改用 getInnerTpl 来格式化显示。

【解决方案2】：

这是自第 3 版以来发现的错误，我在 Condor 提供的sencha forum 中找到了解决方案。

我换行了

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

与

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

当没有定义 emptyText 时，结果就像 forceSelection 设置为 false，即使明确设置为 true。小修复。

【讨论】：