extjs 组合不会停止加载 4.07答案

【问题标题】：extjs combo won't stop loading 4.07extjs 组合不会停止加载 4.07
【发布时间】：2012-02-22 11:25:56
【问题描述】：

我有 3 个组合框。当您单击第一个框时，第二个框需要更新以显示相关数据。我选择第一个组合，第二个框完美更新。但是，如果我再次尝试相同的步骤，第二个框不会停止加载（见图）

这是我认为的代码

{
    xtype: 'combobox',
    name: 'Clients',
    id: 'clients',
    displayField: 'Name',
    store: 'Clients',
    queryMode: 'local',
    mode: 'local',
    valueField: 'Id',
    fieldLabel: 'Clients'
},{
    xtype: 'combobox',
    name: 'Projects',
    id: 'projects',
    displayField: 'Name',
    editable: false, 
    store: 'Projects',
    queryMode: 'local',
    mode: 'local',
    valueField: 'Id',
    fieldLabel: 'Projects'
}

从我的控制器

stores: ['Projects', 'Clients', 'Jobs'],

init: function () {
    this.control({
        '#clients': {
            change: this.onClientSelect
        },
        'processlist button[action=copy]': {
            click: this.onCopyPart
        },
        '#processColourContainer #processColourGrid': {
            edit: this.onPurchaseOrderColourUpdate
        }
    });
},

onLaunch: function () {             
    var clients = this.getClientsStore();
    clients.load();             
},
onClientSelect: function (selModel, selection) {

    var projects = this.getProjectsStore();
    projects.load({
        url: '/Projects/Read/?clientId=' + selection,
        scope: this
    });    
},

【问题讨论】：

标签： extjs extjs4 extjs-mvc

【解决方案1】：

已知错误：

http://www.sencha.com/forum/showthread.php?153490-Combo-Box-Store-Loading

添加这个应该可以解决：

store.on('load', function (store, records, successful, options) {
    if (successful && Ext.typeOf(combo.getPicker().loadMask) !== "boolean") {
        combo.getPicker().loadMask.hide();
    }
});

【讨论】：

【解决方案2】：

我在使用 ExtJS Combobox 的本地数据存储中遇到了相同的症状，但正确的解决方法是在组合框中正确设置 queryMode - 存储中没有错误（至少在 ExtJS 的 4.1 版本中）。如果您的数据本地存储在数据存储中（如下面的工作示例），则 queryMode 必须设置为“local”而不是其默认的“remote”值。

组合框：

xtype: 'combobox',
name: 'sizeMaxUnits',
value: 'TB',
editable: false,
displayField: 'abbr',
**queryMode: 'local',**
store: 'UnitsStore',
valueField: 'units'

商店：

Ext.define('DiskApp.store.UnitsStore', {
extend: 'Ext.data.Store',

requires: [
    'DiskApp.model.UnitsModel'
],

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        autoLoad: false,
        model: 'DiskApp.model.UnitsModel',
        storeId: 'MyStore',
        data: [
            {
                abbr: 'MB',
                units: 'M'
            },
            {
                abbr: 'GB',
                units: 'G'
            },
            {
                abbr: 'TB',
                units: 'T'
            }
        ]
    }, cfg)]);
}

});

【讨论】：

【解决方案3】：

我发现挂钩到组合上的“扩展”事件效果更好（挂钩到商店上的“加载”以某种方式破坏了组合与商店的绑定，导致各种可怕的、难以追踪的错误） .

combo.on('expand', function (field, options) {
    if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
        field.getPicker().loadMask.hide();
    }
}, this);

这为我完成了这项工作而不会破坏我的应用程序。

【讨论】：

【解决方案4】：

一个非常简单的解决方案是将listConfig 配置添加到您的组合框：

{
    xtype:'combobox',
    fieldLabel: 'My Combo',
    listConfig: { loadingText: null, loadMask: false },
}

【讨论】：