如何将数据加载到组合框中？

Posted 2023-02-26

【中文标题】如何将数据加载到组合框中？

【英文标题】：How to load data into Combobox?

【发布时间】：2019-07-22 08:14:02

【问题描述】：

我尝试用来自后端的响应数据填充表单，但我的表单面板包含组合框，如何将数据加载到组合框。

我尝试在formpanel中使用setValues()方法，设置了displayField和valueField，但是combobox还是显示[object,object]。

这是我的商店代码

Ext.define('Servicemsg.directory.AppSystemStore', 
    extend:'Ext.data.Store',
    fields:['id','code','name','comments','lastupdatetime'],
    proxy:
        type:'ajax',
        url:'',
        reader:
            type:'json',
        
    ,
)

这里是组合框的代码

    xtype: 'combobox',
    label: 'Provider',
    name:'provider',
    store:Ext.create('Servicemsg.directory.AppSystemStore'),
    displayField:'name',
    valueField:'id',
    autoLoadOnValue:true
  

这是我的请求代码

form.load(
                url:'#url#'+data.id,
                success:function (form,result,data) 
                    form.setValues(result.result);
                
            );

这样的响应数据

name:'',
text:'',
id:'',
provider:
   id:'',
   name:'',
  

【问题讨论】：

自从 AppSystemStore 绑定到组合后，您没有在 AppSystemStore 中加载数据。你能放一些小版本的可运行代码吗？

【参考方案1】：

您可以获取表单的组合框并将值手动添加到组合框的存储区。一旦组合框存储具有值，您可以为组合框设置一个值（如果适用）。

form.load(
    url:'#url#'+data.id,
         success:function (form,result,data) 
                const combobox = form.down('combobox');
                combobox.getStore().add(results.providers);
                combobox.setValue(/*value that the comobobox should show*/);
                form.setValues(result.result);
            
         );

【参考方案2】：

在这种情况下，使用商店似乎有点过头了。考虑到你有一个 空代理，只是使用它来尝试将数据加载到您的组合框中。

相反，您应该创建一个视图模型并使用属性comboBoxData。你应该 然后将此值绑定到组合框上的data 属性。

这就是你的模型想要的

Ext.define('Fiddle.view.main.MainModel', 
    extend: 'Ext.app.ViewModel',
    data: 
        comboBoxData: null
    
);

你的组合框应该是这样的

    xtype: 'combobox',
    label: 'Provider',
    name: 'provider',
    displayField: 'name',
    valueField: 'id',
    autoLoadOnValue: true,
    bind: 
        data: 'comboBoxData'
    

这就是你的成功函数的样子。 （如何获取视图模型取决于调用它的位置）

success: function (form, result, data) 
    var vm = this.lookupViewModel();
    vm.set('comboBoxData', result.result);

您可能需要针对您的具体实施进行调整。但是，希望这能让您很好地了解最佳方法。