extjs - extjs 组合不会停止加载 4.07

Question

我有 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
    });    
},

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

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

});

Answer 3

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

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

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

Answer 4

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

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