ExtJS4组合框加载/存储问题

Question

I'm seeing an issue with a combobox where I have a listener for the 'change' event. When the event fires it runs a function that filters a store that powers another combobox to filter the values that are available in the 2nd combobox.

The idea is that when you pick from a short list in the first combobox, it pares down the choices in the second combobox.

When the form loads, you can click the second combobox and see all the choices, that works great. When you then select something in the first combobox and then click the second combobox again, you see the appropriate shortened list but it's grayed out and the 'loading...' thing just spins and will never go away.

If you load the form and pick something in the first combobox and then click the second combobox it will filter and show fine but you run into the issue of the loading problem I described above if you try to change your selection in the first box and click the second combobox again.

Please see the code below, I have this setup working on another screen and it doesn't seem to have this issue.

I've got an ext store created like the following:

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

This store powers a combobox, like so:

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

The itemNumberFilter() function takes a store and does filtering on it, here is that code:

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

I see the logged out records every time I change my selection in the first combobox and I can 'see' the results in the second combobox but they're always grayed out with the 'loading..' GIF showing.

Edit: Video example: http://screencast.com/t/cUSHyFE6FIV

Edit: I believe this is the solution:

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

Adding this to the combobox config fixes the issue.

Edit2: I ran into a second bug introduced by this, it was fixed by adding:

this.clearValue();

to the beforequery function (above delete this.lastQuery). This clears the value of the combobox each time the drop down arrow is clicked.

Answer 1

Let's say you select item x in combo_1 and then item a in the pared down list in combo_2 . You then change the selection in combo_1 to y , which then changes the list of items again in combo_2 . Is a available in the new list in combo_2 that results from selecting item y in combo_1 ? Maybe it is an issue of trying to keep an item selected when it no longer exists in the list available to the combo.

Have you tried clearing the selection in combo_2 before applying the filter?

Answer 2

您可以动态加载第二个combox框的存储，但是请确保将第二个combox框设置为“本地”。