Question

我有一个表格，其中有多个组合框字段附加到远程商店：

Ext.define('app.ux.form.MyCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.mycombo',
    store: this.store,
    displayField: 'displayField',
    valueField: 'valueField',
    forceSelection: true,
    autoSelect: true,
    initComponent: function() {
        this.addEvents('selectitem');
        this.enableBubble('selectitem');
        this.callParent(arguments);
        this.listeners = {
            change: function(field, value) {
                this.fireEvent('selectitem', field, value);
            }
        }
    }
})


                fieldLabel: 'DisabilityType',
                name: 'f_disability_type',
                xtype: 'combo',
                valueField: 'valueField',
                displayField: 'displayField',
                forceSelection: true,
                autoSelect: true,
                store: 'DisabilityTypes'

DisabilityTypes是一个基本的Ext.data.store，其中autoLoad设置为false，autoSync设置为true。当您单击与商店关联的下拉列表时，商店会加载并显示值列表。

当我在包含此下拉列表的BasicForm对象上调用loadRecord并将其传递给模型时，它会填充使用本地存储的组合框，但不会加载使用远程存储的组合框。这是因为未加载组合框存储（autoLoad：false）或在表单加载后加载组合框（autoLoad：true）。

我知道这是Ext 3.3.x中的一个问题，并且有一个插件可以修复它：

/**
 * When combo box is used on a form with dynamic store (remote mode) 
 * then sometimes the combobox store would load after the form data. 
 * And in that case the setValue method of combobox will not  
 * set the combobox value properly. This override makes sure that the
 * combobox store is completely loaded before calling the setValue method.
 */
Ext.override(Ext.form.ComboBox, {
    setValue : function(v){
        var text = v;
        if(this.valueField){
            if(!Ext.isDefined(this.store.totalLength)){
                this.store.on('load', this.setValue.createDelegate(this, arguments), null, {single: true});
                if(this.store.lastOptions === null){
                    var params;
                    if(this.valueParam){
                        params = {};
                        params[this.valueParam] = v;
                    }else{
                        var q = this.allQuery;
                        this.lastQuery = q;
                        this.store.setBaseParam(this.queryParam, q);
                        params = this.getParams(q);
                    }
                    this.store.load({params: params});
                }
                return;
            }
            var r = this.findRecord(this.valueField, v);
            if(r){
                text = r.data[this.displayField];
            }else if(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = v;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
    }
});

Ext 4中是否修复了此问题？或者我是否需要找到另一个与Ext 4兼容的插件？

Answer 1

我的解决方案：

Ext.form.field.ComboBox.override( {
    setValue: function(v) {
        v = (v && v.toString) ? v.toString() : v;
        if(!this.store.isLoaded && this.queryMode == 'remote') {
            this.store.addListener('load', function() {
                this.store.isLoaded = true;
                this.setValue(v);
            }, this);
           this.store.load();
        } else {
            this.callOverridden(arguments);
        }
    }
});

Answer 2

Ext.form.field.ComboBox.override( {
    setValue: function(value) {
        if( typeof value != 'object' && !Ext.isEmpty(value) && !this.store.isLoaded && this.queryMode == 'remote') {
            value = (value && value.toString) ? value.toString() : value;
            this.store.addListener('load', function() {
                this.store.isLoaded = true;
                this.setValue(value);
            }, this);
            this.store.load();
        } else {
            this.callOverridden(arguments);
        }
    }
});

Answer 3

只是另一个覆盖 - 使用[form] .loadRecord（[model]）方法为我工作。

要注意：如果你使用相反的方式[form] .updateReocrd（[model]），选项的值将不会使用默认分隔符，而只是使用'，'。

所以 - 如果你有一个loadRecord，做一些事情，然后再调用updateRecord一个loadrecord，由于错误的分隔符，选择将丢失。这就是为什么在这里进行“低于2”的比较

Ext.form.field.ComboBox.override( {
    setValue: function(v) {
        if (this.multiSelect && typeof v != 'undefined' && typeof v.split == 'function'){
            if (this.value.length < 2){
                this.setValue(v.split(this.delimiter));
            }
        } else {
            this.callOverridden(arguments);
        }
    }
});

使用Ext.form.Basic.loadRecord将数据加载到具有远程存储的组合框字段中

3 个答案: