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

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);
        }
    }
});