Extjs4 从远程服务器填充组合框

我有一个

组合框

，我需要从服务器填充数据。在服务器端，我将显示以下数据

PersonID
PersonFName
PersonLName

在组合框中，我需要将文本显示为

PersonFName+PersonName

（如

James Smith

-这是它将在下拉列表中显示的内容），当用户选择一条记录时，我需要显示相应的

PersonID

（比如带有

PersonFName

和

personname

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

---

您的组合框将“Person”作为存储，但我看不到您在任何地方创建名为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'
    }
});

---

您的组合框将“Person”作为存储，但我看不到您在任何地方创建名为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'
    }
});

---

我想你的问题是：如何在组合框中显示

PersonFName

+

PersonName

，但保留

PersonID

字段作为值

您应该在数据模型中添加一个连接名字和姓氏的字段，然后将该字段设置为您的组合框

displayField

config

尽管另一个答案确实提出了一个很好的观点，即组合中定义的存储是

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

}

商店：

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

}

查看：

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

}

---

我想你的问题是：如何在组合框中显示

PersonFName

+

PersonName

，但保留

PersonID

字段作为值

您应该在数据模型中添加一个连接名字和姓氏的字段，然后将该字段设置为您的组合框

displayField

config

尽管另一个答案确实提出了一个很好的观点，即组合中定义的存储是

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

}

商店：

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

}

查看：

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

}

---

我认为store将自动创建。我不知道如何创建。他给了store属性一个字符串，该字符串将使用Ext.data.StoreManager查找具有该id的存储，但他从未创建过这样的存储。我从未在我的项目中手动创建存储。只需定义它们并指定

存储：[]

使用它们的控制器中的数组。当您调用

Ext.getStore（'storename'）时，StoreManager将自动创建存储。

是在控制器的stores属性中定义它们，而不是调用Ext.getStore（Ext.data.StoreManager.lookup的别名）。他没有这样做（我可以看到）.你说得有点对…我用的不是Ext.getStore（）但是controller.getStore如果不存在将创建存储。我认为存储将自动创建。我不知道如何创建。他给了存储属性一个字符串，该字符串将使用Ext.data.StoreManager查找具有该id的存储，但他从未创建过这样的存储。我从未在项目中手动创建存储。只需定义它们并指定

s即可tores:[]

使用它们的控制器中的数组。当您调用

Ext.getStore（'storename'）

时，StoreManager将自动创建存储。创建它们的是在控制器的stores属性中定义它们，而不是调用Ext.getStore（Ext.data.StoreManager.lookup的别名）。他没有这样做（我可以看到）.你说得有点对…我用的不是Ext.getStore（）但是controller.getStore如果不存在将创建存储。您现在看到了什么？主要问题是“如何显示组合字段”？是的，您是对的。我需要知道如何显示组合字段。请看@Geronimo关于如何创建动态字段的回答。您现在看到了什么？主要问题是“如何显示组合字段”lds’？是的，你是对的。我需要知道如何显示组合字段。请看@Geronimo关于如何创建动态字段的答案。