Results 1 to 2 of 2

Thread: Loading mask is not displayed

  1. #1
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Question Loading mask is not displayed

    Hi,
    Loading message is not displayed when the grid is loading or refreshed via paging bar. Please help me in pointing where I am doing wrong.

    PHP Code:
    /**
     * @class UTP.search.SearchGridPanel
     * @extends Ext.Grid.Panel
     * This panel is used to display relevant Search data in Grids.
     */
    UTP.search.SearchGridPanel Ext.extend(Ext.grid.GridPanel, {
    framefalse,
    stripeRows true,
    autoScroll:true,
    maskEmptytrue,
    utpUrl:'',
    dataFields:[
        
    'id', {name:'gdate'type'date'},
        
    'model''sn''sysid''caseNumber''system',
        
    'release','title'
    ],
    trackMouseOver:false,
    disableSelection:true,
    border:false,
    loadMasktrue,
    loadMsg:'Loading ...',
    loadMask: { 
        
    msgthis.loadMsg
    },
    nodataMsg:'Search data yielded 0 results...',
    maskEmptytrue,
    autoExpandColumn:'title',
    colModel: new Ext.grid.ColumnModel({
        ...
    }),
    listeners:{
    rowcontextmenu: function(gridrowIndexe){        
    ...
    },
    sm: new Ext.grid.RowSelectionModel({
        
    singleSelect:true
    }),
    initComponent:function() {
    var 
    config={
    store: new Ext.data.Store({ 
        
    proxy: new Ext.data.HttpProxy({
            
    urlthis.utpUrl,
            
    method'POST'
        
    }),
        
    reader: new Ext.data.JsonReader({
            
    root'rows',
            
    idProperty:'id',
            
    totalProperty'totalCount',
            
    fieldsthis.dataFields
        
    }),
        
    sortInfo: {
            
    field:'gdate',
            
    direction'DESC'
        
    },
        
    listeners: { 
            
    loadexception: { 
                
    fn: function(proxyoptionsresponsee){ 
                    var 
    showMask=false;
                        
    Ext.MessageBox.show({
                           
    title'UTP Error',
                           
    msg'Unable to load the data...',
                           
    buttonsExt.MessageBox.OK,
                           
    iconExt.MessageBox.ERROR
                        
    })
                } 
            }, 
            
    scopethis 
        

    })
    };

    Ext.apply(thisconfig);
    Ext.apply(this,{bbar: new Ext.PagingToolbar({
        
    pageSize100,
        
    storethis.store,
        
    displayInfotrue,
        
    displayMsg'Displaying records {0} - {1} of {2}',
        
    emptyMsg"No results to display"
    })});

    UTP.search.SearchGridPanel.superclass.initComponent.apply(thisarguments);
    this.store.load();
    if (
    this.maskEmpty) { 
    this.store.on
        
    'load', function() { 
            var 
    el this.getGridEl(); 
            if (
    this.store.getTotalCount() == && typeof el == 'object') { 
                
    el.mask(this.nodataMsg'x-mask');
            } 
        }, 
    this
    );
    }}
    });

    /**
     * @class UTP.search.ASUPGridPanel
     * @extends Ext.Grid.Panel
     * This panel is used to display ASUP data.
     */
    UTP.search.AsupSearchGridPanel Ext.extend(UTP.search.SearchGridPanel, {
        
    id:'asup',
        
    title:'ASUP',
        
    border:'false',
        
    utpUrl:'/data/json/search/searchVal.json',
        
    initComponent:function() {
        var 
    config={
        };
            
    // apply config 
            
    Ext.apply(thisExt.apply(this.initialConfigconfig)); 
            
    UTP.search.AsupSearchGridPanel.superclass.initComponent.apply(thisarguments);
        }
    });

    //called as xtype later 
    Thanks,
    Suresh

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    1. Start loading the store after the grid is rendered.
    2. You have 2 loadMask properties in your grid config.
    3. Do not put complex objects (dataFields, loadMask, colModel, listeners, sm etc.) in the prototype. Initialize them in the initComponent method.

Similar Threads

  1. Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>')
    By lukesayaw in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 12 Oct 2010, 5:24 PM
  2. What's the fastest way to get a loading message displayed?
    By bareflix in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 2 May 2010, 5:47 PM
  3. this.getEl().mask('', 'x-mask-loading') not working in IE7, but ok in FF3
    By fangzhouxing in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 5 Nov 2008, 1:09 AM
  4. IE6 Problem: form.el.mask("testing...", "x-mask-loading");
    By vtswingkid in forum Ext 1.x: Bugs
    Replies: 25
    Last Post: 31 Aug 2007, 12:27 PM

Posting Permissions

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