Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-4632 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default Unexplained load mask in upper left corner of browser again

    Unexplained load mask in upper left corner of browser again


    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.

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

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,133
    Vote Rating
    322
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,133
    Vote Rating
    322
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default


    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.


    HTML Code:
    <!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 Code:
    <?php

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

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

    echo 
    json_encode($filingCats)

    ?>

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,133
    Vote Rating
    322
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


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


  7. #7
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,133
    Vote Rating
    322
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.

  9. #9
    Sencha User
    Join Date
    Oct 2008
    Posts
    56
    Vote Rating
    0
    brentdooley999 is on a distinguished road

      0  

    Default


    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.

  10. #10
    Touch Premium Member
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    310
    Vote Rating
    50
    droessner is a jewel in the rough droessner is a jewel in the rough droessner is a jewel in the rough

      0  

    Default


    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?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar