ExtJS4 组合框加载/存储问题

ExtJS4 combobox loading/store issue

本文关键字:存储 问题 加载 组合 ExtJS4      更新时间:2023-09-26

我看到一个组合框的问题,我有一个"更改"事件的侦听器。当事件触发时,它会运行一个函数,该函数筛选一个存储,该存储为另一个组合框提供支持,以筛选第二个组合框中可用的值。

这个想法是,当您从第一个组合框中的简短列表中进行选择时,它会减少第二个组合框中的选择。

加载表单后,您可以单击第二个组合框并查看所有选项,效果很好。当您在第一个组合框中选择某些内容,然后再次单击第二个组合框时,您会看到相应的缩短列表,但它显示为灰色,并且"正在加载..."事情只是旋转,永远不会消失。

如果您加载表单并在第一个组合框中选择某些内容,然后单击第二个组合框,

它将过滤并显示正常,但是如果您尝试更改第一个框中的选择并单击第二个组合框,则会遇到我上面描述的加载问题。

请参阅下面的代码,我在另一个屏幕上运行了此设置,但似乎没有此问题。

我创建了一个扩展商店,如下所示:

var comboBreaker = Ext.create('Ext.data.Store', {
    autoLoad: false,
    remoteSort: true,
    remoteFilter: true,
    fields: [{
        name: 'id',
        mapping: 'item_id',
        type: 'int',
        useNull: false},
        'item_display_number','item_name', 'line_item_type_id', 'item_description'
    ],
    proxy:{
        type:'ajax',
        url: '/invoicer/data/getlineitems',
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'results',
            totalProperty: 'totalCount'
        },
        sorters:[{
            property:'item_display_number',
            direction:'ASC'
        }]
    }
});

这家商店为组合框提供支持,如下所示:

Ext.define('Writer.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.writerform',
    requires: ['Ext.form.field.Text'],
    initComponent: function(){
        this.addEvents('create');
        Ext.apply(this, {
            activeRecord: null,
            frame: true,
            title: 'Line Item',
            id: 'writerform',
            fieldDefaults: {
                anchor: '100%',
                labelAlign: 'right'
            },
            items: [{
                xtype: 'combobox',
                fieldLabel: 'Item #',
                name: 'item_number',
                store: comboBreaker,
                displayField: 'item_display_number',
                valueField: 'id',
                allowBlank: false,
                forceSelection: true
            },{
                xtype: 'combobox',
                fieldLabel: 'Item Type',
                name: 'item_type',
                id: 'item_type',
                displayField: 'line_item_type',
                valueField: 'id',
                store: invoicer_lineItemTypeStore,
                forceSelection: true,
                labelWidth: 75,
                width: 200,
                listeners: {
                    change: {
                        fn: function() {
                            itemNumberFilter(comboBreaker);
                        }
                    }
                }
            }]
});

itemNumberFilter() 函数采用存储并对其进行过滤,这是代码:

function itemNumberFilter( store ) {
    var id = Ext.getCmp('item_type').getValue();
    store.remoteFilter = false;
    store.clearFilter();
    if ( id ) {
        store.filter('line_item_type_id', id);
    }
    store.remoteFilter = true;
    store.removeAll();
    store.load({
        scope: this,
        callback: function( records ) {
            console.log('Loaded records!');
            console.log(records);
        }
    });
}

每次我在第一个组合框中更改我的选择时,我都会看到注销的记录,我可以在第二个组合框中"看到"结果,但它们总是在"加载"时显示为灰色。动图显示。

编辑:视频示例:http://screencast.com/t/cUSHyFE6FIV

编辑:我相信这是解决方案:

lastQuery: '',
listeners: {
                        beforequery: {
                            fn: function(query) {
                                delete this.lastQuery;
                            }
                        }
                    }

将其添加到组合框配置可解决此问题。

Edit2:我遇到了由此引入的第二个错误,它已通过添加以下内容进行修复:

this.clearValue();

到 beforequery 函数(上面删除 this.lastQuery)。这将在每次单击下拉箭头时清除组合框的值。

假设您在combo_1中选择第 x 项,然后在 combo_2 的精简列表中选择第 a 项。然后,将 combo_1 中的选择更改为 y ,然后在 combo_2 中再次更改项目列表。combo_2的新列表中是否a可用,这是在combo_1中选择项目y的结果?也许这是一个当组合可用的列表中不再存在时尝试保持选中状态的问题。

您是否尝试过在应用过滤器之前清除combo_2中的选择?

您可以动态加载第二个组合框的存储,但请确保将第二个组合框设置为"本地"。