Results 1 to 6 of 6

Thread: Loading Mask won't disappear after sorting.

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    10

    Default Loading Mask won't disappear after sorting.

    This is based off of the writable grid example. The data all gets loaded fine, and it was sorting fine until i changed my code to look like the writable grid example, where I extended the form and grid classes. Basically, what is happening is that after I sort the grid (doesn't matter what column) the loading makes appears and won't go away, even though all the data is in the grid and i can continuously sort. I can keep clicking on one of the column headers and it will sort ascending, then sort descending, ect, but the loading mask remains there. The problem is that the loading mask appears but then doesn't go away. I can't figure out why it is doing this and I am not sure how the loading mask works exactly. I have been looking through the documentation and I haven't found much to help me understand. Here is my code:


    Code:
    Ext.define('Employee.Form',
    {
        extend: 'Ext.form.Panel',
        alias: 'widget.employeeform',
    
    
        requires: 
        [
            'Ext.form.*',
            'Ext.layout.container.Column',
            'Ext.tab.Panel'
        
        ],
        initComponent: function()
        {
            Ext.apply(this, 
            {
                url:'save-form.php',
                frame:true,
                title: 'Simple Form',
                bodyStyle:'padding:5px 5px 0',
                width: 350,
                fieldDefaults: {
                    msgTarget: 'side',
                    labelWidth: 75
                },
                defaultType: 'textfield',
                defaults: {
                    anchor: '100%'
                },
    
    
                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, {
                    xtype: 'timefield',
                    fieldLabel: 'Time',
                    name: 'time',
                    minValue: '8:00am',
                    maxValue: '6:00pm'
                }],
    
    
                buttons: [{
                    text: 'Save'
                },{
                    text: 'Cancel'
                }]
            });
            this.callParent();
        }
    });
    
    
    
    
    
    
    Ext.define('Employee.Grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.employeegrid',
    
    
        requires: [
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.panel.*',
            'Ext.util.*',
            'Ext.grid.PagingScroller'     
        ],
        
        initComponent: function()
        {
            Ext.apply(this, 
            {
                title:'Employee List',
                verticalSctroller: 
                {
                    xtype: 'paginggridscroller',
                    activePrefect: false
                },
            
                loadMask: false,
                invalidateScrollerOnRefresh: false,
                viewConfig: 
                {
                    trackOver: false
                },            
                columns: 
                [            
                    {
                        text: 'Id',
                        flex: 10,
                        hideable: false,
                        dataIndex: 'id',
                        sortable: true
                    },
                    {
                        text: 'Employee Name',
                        flex: 50,
                        hideable: false,
                        dataIndex: 'employee_name'
                    },
                    {
                        text: 'Nickname',
                        flex:20,
                        hideable: false,
                        dataIndex: 'nickname'
                    },
                    {
                        text: 'First Name',
                        felx:50,
                        hideable: false,
                        dataIndex: 'first_name'
                    },
                    {
                        text: 'Last Name',
                        flex: 50,
                        hideable: false,
                        dataIndex: 'last_name'
                    }
                ]
            });
            this.callParent();
                
        },
    });
    
    
    
    
    Ext.define('EmployeeModel', {
            extend: 'Ext.data.Model',
            fields: ['employee_name', 'id','last_name', 'first_name', 'nickname' ]
        });
    
    
    
    
    Ext.require([
        'Ext.data.*'   
    ]);
    
    
    Ext.onReady(function(){
        var store = Ext.create('Ext.data.JsonStore', {
            model: 'EmployeeModel',
            id: 'store',
            pagesize: 50,
            buffered: true,
            purgePageCount: 0,
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'get-employees.php',
                reader: {
                    type: 'json',
                    root: 'employees'
                }
            }
        });
            
        var main = Ext.create('Ext.container.Container', {
            padding: '0 0 0 20',
            width: 500,
            height: 500,
        loadmask: false,
            renderTo: document.body,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: 
            [
                {
                    itemId: 'form',
                    xtype: 'employeeform',
                    height: 200,
                    margins: '0 0 10 0'
                },
            
                {        
                    itemId: 'grid',
                    xtype: 'employeegrid',
                    title: 'Employee List',
                    flex: 1,
                    store: store
                }            
            ]
    
    
        });
    
    
    });

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Do you even want a load mask? I see you have loadMask set to false on the grid panel but the viewConfig is where you should set the loadMask
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    10

    Default

    i added the loadMaks: false to the view config, and it got rid of the loading mask. Do you think because I had autoLoad: true that the loadingMask stayed there? I was just worried that the loading mask being there was indication that something was being done incorrectly.

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    What version of Ext JS 4?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    10

    Default

    version 4.0

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Quote Originally Posted by manticor View Post
    version 4.0
    There has been lots of bug fixes since those days.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •