Extjs组合框不会自动选择displayField

时间:2013-12-28 17:47:57

标签: extjs combobox

更新 -
我还在JSFIDDLE http://jsfiddle.net/mAgfU/371/中做了一个模仿 和表单面板:http://jsfiddle.net/kA6mD/2/

我有波纹管组合 当我使用以下代码设置表单值时:

this.form.loadRecord(data);

除了组合之外,整个表单都正常。 而不是给我displayField,而是在显示屏中显示valueField

enter image description here

正如您在上图所示,组合应该显示“Walla”(displayField)而不是“1”(valueField

  Ext.define('App.view.ForeignCombo', {
            extend: 'Ext.form.ComboBox',
            alias: 'widget.foreigncombo',
            queryMode: 'local',
            displayField: 'Name',
            valueField: 'Id',
            editable: false,
            matchFieldWidth: false,
            constructor: function(config) {
                Ext.apply(this, config);
                Ext.define('BrnadComboModel', {
                    extend: 'Ext.data.Model',
                    fields: ['Id', 'Name']
                });
                this.store = Ext.create('Ext.data.Store', {
                    model: 'BrnadComboModel',
                    autoLoad: true,
                    proxy: {
                        type: 'ajax',
                        url: '/api/Brand/',
                        reader: {
                            type: 'json',
                            root: 'Results'
                        }
                    },
                    pageSize: 50,
                });
                this.callParent();
            }
        }
    );

这就是我使用它的方式:

{
  "xtype": 'foreigncombo'
, "name": 'Brand.Id'
, "fieldLabel": 'Brand.Id'
}

表单显示和组合ajax请求之间没有竞争,组合商店是autoLoad:true,这意味着我看到它已经被加载了......

由于

1 个答案:

答案 0 :(得分:0)

我用你的小提琴作为一个例子。在第87行(Ext.ComponentQuery.query('comobobox')....)中放置一个断点,在这个小提琴http://jsfiddle.net/kA6mD/9/中,并设置一个指向Ext.ComponentQuery.query('combobox')[0] .store.data ..你会注意到商店没有数据。这可能与我在评论中提到的内容有关。

我知道必须有一个更好的方法来实现这一点,但我通常用作解决方法的方法是在应用程序之前的某个时刻加载存储,或者使用同步的Ext.Ajax.request并加载每个记录。在商店里的时间。

由于这是品牌的组合,我想你可以在之前加载商店(即app加载)并查找商店,而不是每次创建一个foreigncombo组件时都创建一个新商店,所以第一个解决方案应该可以工作。 / p>

至于第二种解决方法,它也应该工作,它需要更多的编码,但它实际上很容易。看起来应该是这样......

Ext.Ajax.request({
    url:'your/url/',
    async:false,
    .....
    success:function(response){
        var records = Ext.JSON.decode(response.responseText);
        for(var m=0; m<records.length; m++){
            var record = Ext.create('YourBrandModel',{
                abbr:records[m].abbr,
                name:records[m].name
            });
            store.add(record);
        }
    }
})

您应该尽可能少地执行此操作,因为如果每次创建“foreigncombo”时都会调用它,可能会降低用户体验,因此在创建存储之前检查此存储是否存在可能是个好主意。

请注意我没有测试过此代码,因此您可能需要稍微调整一下才能使其正常工作。但它应该让你走上正轨。