從遠程服務器填充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' 
    } 
});