Unexplained load mask in upper left corner of browser again

[danCTS]

The code below has three combo boxes in a form. On selection of the first combo i load the store for the second combo, and on selection of the second combo i load the store for the third combo. when a selection is made in the first or second combo a load mask shows in the top left corner of the browser window. You can only see about half of the load mask. I am not sure if this is a bug or something I am doing wrong. I had a similar issue here http://www.sencha.com/forum/showthre...056#post655056 but I was able to correct it by using seperate stores for the grids. In the code below, each combo uses it's own store.

Ext.onReady(function(){
        
    Ext.define('BarCodeDefinition', {
        extend: 'Ext.data.Model',
    
        fields: [
            {name: 'id', type: 'int' },
            {name: 'name'},
            {name: 'number', type: 'int'},
            {name: 'Cat1-name', serverVal: 'cat_1'},
            {name: 'Cat2-name', serverVal: 'cat_2'},
            {name: 'Cat3-name', serverVal: 'cat_3'},          
            {name: 'created', type: 'date', dateFormat: 'n/j h:ia'},
            {name: 'modified', type: 'date', dateFormat: 'n/j h:ia'},
        ]        
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'BarCodeDefinition',
        pageSize: itemsPerPage,
        proxy: {
            type: 'ajax',
            api: {
                create: '/admin/bar_code_definitions/add/',
                read: '/admin/bar_code_definitions',
                update: '/admin/bar_code_definitions/edit/',
                destroy: '/admin/bar_code_definitions/delete/'
            },
            reader: {
                type: 'json',
                root: 'definitions',
            },
            writer: {
                root: 'data[BarCodeDefinition]',
                encode: true,
                writeAllFields: false,
                nameProperty: 'serverVal'
            },
            directionParam: 'direction',
            simpleSortMode: true      
        },
        remoteSort: true,      
        autoLoad: true,
        listeners: {
            write: function(store, operation, eOpts) {
                var responseTxt = Ext.JSON.decode(operation.response.responseText);
                if(!responseTxt.success || !operation.success )    {
                    var msg = null;
                    switch(operation.action) {
                        case 'destroy' : 
                            msg = 'Unable to delete definition.';
                            break;
                        case 'create' :
                            msg = 'Unable to create definition.';
                            break;
                        case 'update' :
                            msg = 'Unable to update definition.';
                            break;    
                    }
                    Ext.MessageBox.alert('Status', msg);
                }
                if(responseTxt.success) {
                    Ext.MessageBox.hide();
                    if(operation.action === 'create' || operation.action === 'update') {
                        gridForm.getForm().reset();
                        Ext.getCmp('cat2Name').disable();
                        Ext.getCmp('cat3Name').disable();
                        store.load();                            
                    }
                    if(operation.action === 'destroy') {
                        gridForm.getForm().reset();
                        Ext.getCmp('cat2Name').disable();
                        Ext.getCmp('cat3Name').disable(); 
                        store.load();                        
                    }                    
                }    
            },
            beforesync: function(){
                Ext.MessageBox.wait('Please Wait......');
            }
        }
    });    
    
    Ext.define('DocumentFilingCategory', {
        extend: 'Ext.data.Model',
        fields: [{name: 'id', type: 'int'}, {name: 'name'}]
    });   
    
    var catProxy = Ext.create('Ext.data.proxy.Ajax', {
        url: '/admin/document_filing_categories/get_cats',
        reader: {
            type: 'json',
            root: 'cats'
        },
        extraParams: {
            parentId: 'parent'
        }        
    });
    
      var cat1Store = Ext.create('Ext.data.Store', {
        model: 'DocumentFilingCategory',
        proxy: catProxy,
        autoLoad: true
    });
    
      var cat2Store = Ext.create('Ext.data.Store', {
        model: 'DocumentFilingCategory',
        proxy: catProxy,
        listeners: {
            load: function(store, records, successful, operation, eOpts) {
                if(records[0]) {
                    Ext.getCmp('cat2Name').enable();
                }
            }
        }
    });
    
    var cat3Store = Ext.create('Ext.data.Store', {
        model: 'DocumentFilingCategory',
        proxy: catProxy,
        listeners: {
            load: function(store, records, successful, operation, eOpts) {
                if(records[0]) {
                    Ext.getCmp('cat3Name').enable();
                }
            }
        }        
    });
    
    var gridForm = Ext.create('Ext.form.Panel', {
        id: 'barCodeDefinitionsForm',
        frame: true,
        title: 'Bar Code Definitions',
        bodyPadding: 5,
        width: 950,
        layout: 'column',
        fieldDefaults: {
            labelAlign: 'left',
            msgTarget: 'side'
        },
        items: [{
            columnWidth: 0.60,
            xtype: 'gridpanel',
            id: 'barCodeDefGrid',
            store: store,
            height: 315,
            title:'Definitions',
            columns: [{
                text: 'id',
                dataIndex: 'id',
                hidden: true
            },{
                text: 'Name',
                dataIndex: 'name'
            },{
                text: 'Number',
                dataIndex: 'number'
            },{
                text: 'Cat 1',
                dataIndex: 'Cat1-name',
                flex: 1
            },{
                text: 'Cat 2',
                dataIndex: 'Cat2-name',
                flex: 1               
            },{
                text: 'Cat 3',
                dataIndex: 'Cat3-name',
                flex: 1              
            }],
            tbar: [{xtype: 'tbfill'},{ 
                xtype: 'button', 
                text: 'New Definition',
                icon: '/img/icons/add.png',
                handler: function() {
                    this.up('form').getForm().reset();
                    Ext.getCmp('cat2Name').disable();
                    Ext.getCmp('cat3Name').disable();
                    this.up('grid').getSelectionModel().deselectAll();
                } 
            },{
                xtype: 'button',
                text: 'Delete Definition',
                icon: '/img/icons/delete.png',
                handler: function() {
                    Ext.MessageBox.confirm('Confirm', 'Delete the selected record?', function(id){
                        if(id === 'yes') {    
                            var record = Ext.getCmp('barCodeDefGrid').getSelectionModel().getLastSelected();
                            store.remove(record);               
                            store.sync();
                        } 
                        else {
                            return false;
                        }                     
                    });
                }
            }],
            dockedItems: [{
                xtype: 'pagingtoolbar',
                store: store,
                dock: 'bottom',
                displayInfo: true
            }],            
            listeners: {
                selectionchange: function(model, records) {
                    Ext.getCmp('cat2Name').disable();
                    Ext.getCmp('cat3Name').disable();  
                    if (records[0]) {
                        var vals = {
                            name: records[0].data.name,
                            number: records[0].data.number
                        }
                        this.up('form').getForm().loadRecord(records[0]);
                    }
                    this.up('form').getForm().clearInvalid();
                }
            }
        }, {
            columnWidth: 0.4,
            margin: '0 0 0 10',
            padding: 10,
            xtype: 'fieldset',
            frame: true,
            title:'Add / Edit Form',
            defaults: {
                width: 300,
                labelWidth: 50
            },
            defaultType: 'textfield',
            items: [{
                name: 'id',
                xtype: 'hidden'
            },{
                fieldLabel: 'Name',
                name: 'name',
                allowBlank: false,
                maxLength: 100,
                enforceMaxLength: true,                
            },{
                fieldLabel: 'Number',
                xtype: 'numberfield',
                width: 100,
                minValue: 0,
                maxValue: 99999,
                maxLength: 5,
                enforceMaxLength: true,
                hideTrigger: true,
                name: 'number',
                allowBlank: false
            },{
                fieldLabel: 'Cat 1',
                name: 'Cat1-name',
                id: 'cat1Name',               
                store: cat1Store,
                displayField: 'name',
                valueField: 'id',        
                queryMode: 'local',
                xtype: 'combo', 
                value: null,
                allowBlank: false,
                listeners: {
                    select: function(combo, records, Eopts) {
                        if(records[0]) {
                            Ext.getCmp('cat2Name').disable();
                            Ext.getCmp('cat2Name').reset();
                            Ext.getCmp('cat3Name').disable();
                            Ext.getCmp('cat3Name').reset(); 
                            cat2Store.load({params: {parentId: records[0].data.id}});
                        }
                        
                    }
                }
            },{
                fieldLabel: 'Cat 2',
                name: 'Cat2-name',
                id: 'cat2Name',
                xtype: 'combo',
                disabled: true,
                store: cat2Store,
                displayField: 'name',
                valueField: 'id',
                queryMode: 'local',
                value: null,
                allowBlank: false,
                listeners: {
                    select: function(combo, records, Eopts) {
                        if(records[0]) {
                            Ext.getCmp('cat3Name').disable();
                            Ext.getCmp('cat3Name').reset();
                            cat3Store.load({params: {parentId: records[0].data.id}});
                        }                    
                    }
                }                
            },{
                fieldLabel: 'Cat 3',
                name: 'Cat3-name',
                id: 'cat3Name',
                xtype: 'combo',
                store: cat3Store,
                disabled: true,
                displayField: 'name',
                valueField: 'id',
                queryMode: 'local',
                value: null,
                allowBlank: false
            }]
        }],
        buttons: [{
            text: 'Save',
            handler: function() {
                var form = this.up('form').getForm();
                var vals = form.getValues();
                if(form.isValid()) {
                    if(vals.id != '') {
                        var barCodeDefinition = store.getById(parseInt(vals.id, 10));
                        barCodeDefinition.set(vals)
                    }
                    else {
                        var barCodeDefinition = Ext.create('BarCodeDefinition', form.getValues());
                        store.add(barCodeDefinition);
                    }            
                    store.sync();                
                }        
            }          
        }],        
        renderTo: 'barCodeDefinitions'
    });    
});

[jsakalos]

You could set a breakpoint in setLoading method of AbstractComponent to see if the passed target is not hidden and has reasonable dimensions. You can also inspect the call stack there to find out what is the problem.

[danCTS]

I set a breakpoint on several different lines of the setLoading method of AbstractComponent with FireBug and executed the code causing the issue. The breakpoints never get triggered?

for example I am using extjs-all-debug.js ver 4.0.6 and I set a break point on line 17467, it never makes it here.

i ran the code causing the unwanted load mask to show through FireBug's profiler, and noticed that there are two methods being called _showModalMask and _hideModalMask. if i set a breakpoint on line 20825 in ext-all-debug.js it triggers the debugger. however this does not really help me, as i can't figure out why these methods are being called, when there should be no load masks for these combo boxes.

[jsakalos]

Well, I could run your code and try to find the problem - it seems pretty complete - however I'd need some server-side. Json file containing the server response would be enough.

[danCTS]

Well at this point I believe it to be a bug, so I made a test case.
The first time you select the dropdown menus in order from top to bottom everything works as expected. If you select something in the top, and middle dropdown menus and then change the top dropdown menu selection, the unwanted load mask is shown in the top left corner of the browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>test</title>        
        <meta name="generator" content="Studio 3 http://aptana.com/">
        <meta name="author" content="daniel">
        <link rel="stylesheet" type="text/css" href="ext-4.0.6/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext-4.0.6/ext-all-debug.js"></script>
        
        <!-- Date: 2011-10-11 -->
        <script type="text/javascript">
            Ext.onReady(function() {
                Ext.QuickTips.init();

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

                var docFilingCatStore = Ext.create('Ext.data.Store', {
                    model : 'DocumentFilingCategory',
                    storeId : 'docFilingCatStore',
                    proxy : {
                        type : 'ajax',
                        url : 'test.php',
                        reader : {
                            type : 'json',
                            root : 'cats'
                        },
                        extraParams : {
                            parentId : 'parent'
                        }
                    }
                });

                var docFilingChildCatStore = Ext.create('Ext.data.Store', {
                    model : 'DocumentFilingCategory',
                    storeId : 'docFilingChildCatStore',
                    proxy : {
                        type : 'ajax',
                        url : 'test.php',
                        reader : {
                            type : 'json',
                            root : 'cats'
                        }
                    }
                });

                var docFilingGrandChildCatStore = Ext.create('Ext.data.Store', {
                    model : 'DocumentFilingCategory',
                    storeId : 'docFilingGrandChildCatStore',
                    proxy : {
                        type : 'ajax',
                        url : 'test.php',
                        reader : {
                            type : 'json',
                            root : 'cats'
                        }
                    }
                });

                var search = Ext.create('Ext.form.Panel', {
                    renderTo: 'form',
                    items : [{
                        xtype : 'combo',
                        fieldLabel : 'Cat 1',
                        id : 'cat_1',
                        store : docFilingCatStore,
                        queryMode : 'remote',
                        valueField : 'id',
                        displayField : 'name',
                        name : 'cat_1',
                        listeners : {
                            select : function(combo, records, index) {
                                docFilingChildCatStore.load();
                            }
                        }
                    }, {
                        xtype : 'combo',
                        fieldLabel : 'Cat 2',
                        store : docFilingChildCatStore,
                        id : 'cat_2',
                        queryMode : 'local',
                        valueField : 'id',
                        displayField : 'name',
                        name : 'cat_2',
                        listeners : {
                            select : function(combo, records, index) {
                                docFilingGrandChildCatStore.load();
                            }
                        }
                    }, {
                        xtype : 'combo',
                        fieldLabel : 'Cat 3',
                        queryMode : 'local',
                        store : docFilingGrandChildCatStore,
                        id : 'cat_3',
                        name : 'cat_3',
                        valueField : 'id',
                        displayField : 'name'
                    }]

                });

            });

        </script>
    </head>
    <body><div id='form' style="margin-top: 50px"></div></body>
</html>

<?php

$filingCats['cats'][0] = array(
    'id' => 1,
    'name' => 'Test Cat'     
);

$filingCats['cats'][1] = array(
    'id' => 2,
    'name' => 'Test Cat 2'     
);

echo json_encode($filingCats)

?>

[jsakalos]

I've added sleep(5); to php so that mask is displayed a little longer. I've got the following behavior. What's wrong?

[danCTS]

in the steps to reproduce I said to make a selection from the dropdown menus, you never selected anything, please see screen cast here http://www.screencast.com/t/TF9cZLlo8C6E

[jsakalos]

I see. This is definitely a bug. Your code is clean and contains nothing that could cause this weird behavior.

Moving this thread to bugs.

[brentdooley999]

I've noticed a strange mask in the upper left corner when loading a store attached to a grid that it on a hidden card. I don't have time to create a test case at the moment but I thought that info might help.

[droessner]

Running into this same issue. I have a combobox that re-loads another comobo box when an item is selected. I get the same random load mask at the top left of the screen. Has anyone debugged this yet and figured out if there's a temporary override that could be applied to fix this?