Sencha ExtJS 4 Linked Combobox Issue

Question

I'm experimenting what seems to be a bug in ExtJS 4 Combobox AJAX Store.

I have a grid with articles, each article has a supplier and a category, each supplier offer articles that belong to a certain category. In order to filtre the grid i've put 2 Combos(Select Lists). One for supplier and one for category. These combos get their values by AJAX from a php script.

Everything went good till i tried to link the combos like this:

When the user selects a category from the combobox, the supplier Store refreshes with suppliers that offer that category (works fine!).

The the user selects a supplier from the combobox, and the category Store refreshes(refresh is good, as seen with firebug).

Here is my issue now, if the user selects the category combobox again it, the loading mask doesn't go away so it can't change the value of the combo.

I've tested and the AJAX is working fine, it's just a EXTJS 4 issue with the Loading Mask.

The issue is happening both ways:

A)

1. User selects a category

2. User selects a supplier

3. User CAN'T select a category(loading mask doesn't go away)

AND

B)

1. User selects a supplier

2. User selects a category

3. User CAN'T select a supplier(loading mask doesn't go away)

EDIT:

The problem seems to also occur on these situation(and vice-versa: supplier->category)

1. User selects a category

2. User changes the category

3. User CAN'T select a supplier(loading mask doesn't go away)

Here are my models:

    Ext.define('Category', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'name'},
            { name: 'id'}
        ]
    });

    Ext.define('Supplier', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'name'},
            { name: 'id'}
        ]
    });

Here are my stores:

    var categoryStore = Ext.create('Ext.data.Store', {
        model: 'Category',
        autoLoad: true,
        remoteSort: true,
        proxy: {
            type: 'ajax',
            url: 'GetCategorysForSupplier',
            reader: {
                type: 'json',
                root: 'items'
            },
            extraParams: {
                supplier: 0
            }
        }
    });

    var supplierStore = Ext.create('Ext.data.Store', {
        model: 'Supplier',
        autoLoad: true,
        remoteSort: true,
        proxy: {
            type: 'ajax',
            url: 'getSuppliersForCategory.php',
            reader: {
                type: 'json',
                root: 'items'
            },
            extraParams: {
                category: 0
            }
        }
    });

And here are my combos:

    var categoryFilterCombo = Ext.create('Ext.form.field.ComboBox', {
        xtype: 'combo',
        store: categoryStore,
        displayField: 'name',
        valueField: 'id',
        fieldLabel: 'Category Filter',
        listeners: {
            change: function(field,newVal) {
                if (Ext.isNumeric(newVal)) {
                    supplierStore.proxy.extraParams.category = newVal;
                    articleStore.proxy.extraParams.category = newVal;
                    supplierStore.load();
                    articleStore.load();
                }
            }
        }
    });

    var supplierFilterCombo = Ext.create('Ext.form.field.ComboBox', {
        store: supplierStore,
        displayField: 'name',
        queryMode: 'local',
        valueField: 'id',
        fieldLabel: 'Supplier Filter',
        listeners: {
            change: function(field,newVal) {
                if (Ext.isNumeric(newVal)) {
                    categoryStore.proxy.extraParams.supplier = newVal;
                    articleStore.proxy.extraParams.supplier = newVal;
                    categoryStore.load();
                    articleStore.load();
                }
            }
        }
    });

Kind Regards,

Dan Cearnau

Sencha ExtJS 4 Linked Combobox Issue

Answers (1)

Related Questions