从远程服务器填充Combobox

Question

我有一个combobox，我需要从服务器填充数据。在服务器端，我有以下数据要显示。

PersonID 
PersonFName 
PersonLName 

在ComboBox，我需要显示的文字为PersonFName + PersonLName（像James Smith - 这是它会在下拉显示向下），并且当用户选择一个记录，我需要显示相应的PersonID （如PersonFName和PersonLName的人拥有该用户的PersonID 1）。

我无法想出解决办法，这是我的代码

查看：

{ 
        xtype: 'combobox', 
        id: 'personcombo', 
        readOnly: false, 
        selectOnFocus: true, 
        forceSelection: true, 
        store: 'Person' 
      } 

商店：

Ext.define('MyApp.store.PersonStore', { 
    extend: 'Ext.data.Store', 
    requires: [ 
     'MyApp.model.Person' 
    ], 

    constructor: function(cfg) { 
     var me = this; 
     cfg = cfg || {}; 
     me.callParent([Ext.apply({ 
      model: 'MyApp.model.Person', 
      proxy: { 
       type: 'ajax', 
       api: { 
        read: 'person.php', 
        create: 'person.php' 
       }, 
       reader: { 
        type: 'array' 
       } 
      } 
     }, cfg)]); 
    } 
}); 

型号：

Ext.define('MyApp.model.Person', { 
    extend: 'Ext.data.Model', 

    fields: [ 
     { 
      name: 'PersonID' 
     }, 
     { 
      name: 'PersonFName' 
     }, 
     { 
      name: 'PersonLName' 
     } 
    ] 
}); 

Answer 1

我觉得你的问题是：如何显示PersonFName + PersonLName在下拉列表，但保持PersonID字段的值。

您应该添加一个converted字段，该字段将数据模型中的名字和姓氏连接起来，然后将该名称与您的组合框displayField配置在一起。

尽管其他答案的确提出了一个很好的观点，即您的组合中定义的商店是Person，但您显示的商店的代码为PersonStore。

这将是这个样子：

型号：

Ext.define('MyApp.model.Person', { 
    extend: 'Ext.data.Model', 

    fields: [ 
     { 
      name: 'PersonID' 
     }, 
     { 
      name: 'PersonFName' 
     }, 
     { 
      name: 'PersonLName' 
     }, 
     { 
      name: 'PersonName', 
      convert: function(value, record) { 
       return record.data.PersonFName + ' ' + 
        record.data.PersonLName; 
      } 
     } 
    ] 
}); 

商店：

// changed to "Person" instead of "PersonStore" 
Ext.define('MyApp.store.Person', { 
    extend: 'Ext.data.Store', 
    requires: [ 
     'MyApp.model.Person' 
    ], 

    model: 'MyApp.model.Person', 
    proxy: { 
     type: 'ajax', 
     api: { 
      read: 'person.php', 
      create: 'person.php' 
     }, 
     reader: 'array' 
    } 
}); 

查看：

{ 
    xtype: 'combobox', 
    id: 'personcombo', 
    readOnly: false, 
    selectOnFocus: true, 
    forceSelection: true, 
    store: 'Person', 
    valueField: 'PersonID', 
    displayField: 'PersonName' // the converted field 

} 

Answer 2

你的组合框有“人'作为商店，但我没有看到你在任何地方创建一个叫Person的商店。尝试store: Ext.create('MyApp.store.PersonStore', {autoLoad: true})。

您还可以简化您的商店：

Ext.define('MyApp.store.PersonStore', { 
    extend: 'Ext.data.Store', 
    requires: [ 
     'MyApp.model.Person' 
    ], 

    model: 'MyApp.model.Person', 
    proxy: { 
     type: 'ajax', 
     api: { 
      read: 'person.php', 
      create: 'person.php' 
     }, 
     reader: 'array' 
    } 
});