Page 1 of 3 123 LastLast
Results 1 to 10 of 21

Thread: loadMask set to true but doesn't work

  1. #1
    Ext User
    Join Date
    Oct 2008
    Posts
    18
    Vote Rating
    0
      0  

    Default loadMask set to true but doesn't work

    Hello all,

    I have a 2 grids which sit in a 2 separate tabs in a form panel. When a user clicks on a row in a grid the stores for the 3 grids are loaded, however no loadMask is appearing on the grid.

    Here is my code for the grid selection model:

    Code:
    sm: new Ext.grid.RowSelectionModel({
                    singleSelect: true,
                    listeners: {
                        rowselect: function(sm, row, rec){                 
                            //Check if the form is active if so remove
                            var item = Ext.getCmp('card-id').findById('viewform');
                            if(item) {
                                Ext.getCmp('viewform-id').remove();
                            }
                            //Bring the viewform to the front of the card layout
                            Ext.getCmp('card-id').layout.setActiveItem('viewform-id');            
                            //This loads the 1st grid
                            Ext.getCmp('viewform-athgrid').store.load({
                                params: {
                                    team_id: rec.data.id,
                                    type: 'a'
                                }
                            });        
                            //This loads the 2nd grid
                            Ext.getCmp('viewform-staffgrid').store.load({
                                params: {
                                    team_id: rec.data.id,
                                    type: 'b'
                                }
                            });
                            //doLayout();                
                            Ext.getCmp('viewform-id').doLayout();
                            //Load the selected teamgrid record into the viewform
                            Ext.getCmp('viewform-id').getForm().loadRecord(rec);
                        }
                    }
                })
    Here are is code that creates the grids:

    Code:
    Ext.ns('app', 'app.form');
    
    //Warning icons next to invalid  items
    Ext..Field.prototype.msgTarget = 'side';
    
    app.form = Ext.extend(Ext..Panel, {
        
        //configurables
        
        initComponent:function(){  
            
            //Button to edit a sport
            this.btnEdit = new Ext.Button({ 
                text: 'Edit',
                handler: this.onEdit,
                scope: this
            });
            
            //Button to edit a sport
            this.btnCancel = new Ext.Button({ 
                text: 'Cancel',
                handler: this.onCancel,
                scope: this
            });
            
            this.grida = new Ext.grid.GridPanel({
                id: 'ateam-view-athgrid',
                stripeRows: true,
                height: 200,
                loadMask: true, //set the load the mask here to true
                store: new Ext.data.JsonStore({
                    root: 'records',
                    totalProperty: 'totalCount',
                    idProperty: 'id',
                    fields: [{ name: 'full_name' },
                        { name: 'enabled' },
                        { name: 'created_at'},
                        { name: 'updated_at'}],
                    proxy: new Ext.data.HttpProxy({
                        url: '/users.ext',
                        method: 'GET'
                    })
                }),
                columns: [{
                        header: 'Name',
                        sortable: true,
                        dataIndex: 'full_name'
                    }],
                viewConfig: {
                    forceFit: true
                },
                scope: this
            });
            
            this.gridb = new Ext.grid.GridPanel({
                id: 'ateam-view-staffgrid',
                stripeRows: true,
                height: 200,
                loadMask: true, //set the load mask here to true
                store: new Ext.data.JsonStore({
                    root: 'records',
                    totalProperty: 'totalCount',
                    idProperty: 'id',
                                    fields: [{ name: 'full_name' },
                        { name: 'enabled' },
                        { name: 'created_at'},
                        { name: 'updated_at'}],
                    proxy: new Ext.data.HttpProxy({
                        url: '/users.ext',
                        method: 'GET'
                    })
                }),
                columns: [{
                        header: 'Name',
                        sortable: true,
                        dataIndex: 'full_name'
                    }],
                viewConfig: {
                    forceFit: true
                },
                scope: this
            });
            
            Ext.apply(this, { 
                items: [{
                        border: false,
                        items: [{
                                xtype: 'fieldset',
                                title: 'Team Details',
                                autoHeight: true,
                                autoWidth: true,
                                defaultType: 'textfield',
                                items: [ // elements]    
                            },new Ext.TabPanel({ //Tabpanel here which contains the 2 grids
                                activeTab: 0,
                                plain: true,
                                items: [ this.grida, this.gridb ]
                            })]
                    }],
                buttons: [ this.btnEdit, this.btnCancel ]
            });
            app.form.Form.superclass.initComponent.apply(this, arguments);
        },
        
        //When the view is rendered per...  
        onRender : function(){
            app.form.Form.superclass.onRender.apply(this, arguments);
        }
    });
    I have set the loadMask to true but this has no effect.

    Is there something that I am missing?

  2. #2
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
      0  

    Default

    have you checked in firebug... i guess you are not loading the store !!!

  3. #3
    Ext User
    Join Date
    Oct 2008
    Posts
    18
    Vote Rating
    0
      0  

    Default

    hi ritesh,

    yes im loading the store if I wasn't there wouldn't be any data in the grid?

    just to be sure i added these two lines to the onRender of my formpanel:

    Code:
        onRender : function(){
            app.admin.teams.TeamViewForm.superclass.onRender.apply(this, arguments);
            //To render the load mask we must load the store!
            Ext.getCmp('ateam-viewform-athgrid').store.load();
            Ext.getCmp('ateam-viewform-staffgrid').store.load();
        }
    But the loadMask still does not appear! Any ideas?

  4. #4
    Ext User
    Join Date
    Oct 2008
    Posts
    18
    Vote Rating
    0
      0  

    Default help!

    surely some one knows why this would be occuring ?

  5. #5
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
      0  

    Default

    try loading the store on render event of grid itself...

    still better...

    dont load store anywhere....

    and try this in firebug console....
    Ext.getCmp('ateam-viewform-athgrid').store.load();
    Ext.getCmp('ateam-viewform-staffgrid').store.load();

    and see if you can see the mask...

  6. #6
    Ext User
    Join Date
    Oct 2008
    Posts
    18
    Vote Rating
    0
      0  

    Default

    try loading the store on render event of grid itself...
    I added this to my grid config:

    Code:
     listeners : {
              render: function(){
                 Ext.getCmp('ateam-viewform-athgrid').store.load();
              }
         }
    It makes no difference.

    dont load store anywhere....
    I did this and it still made no difference, only there was no data in the grid.

    and try this in firebug console....
    Ext.getCmp('ateam-viewform-athgrid').store.load();
    Ext.getCmp('ateam-viewform-staffgrid').store.load();
    Brings back an undefined error....

    Please help!

  7. #7
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
      0  

    Default

    dont you think....

    Code:
     Ext.getCmp('ateam-viewform-athgrid').store.load();
     Ext.getCmp('ateam-viewform-staffgrid').store.load();
    it should have worked ?

    try reload()

    Doc can be of much helps...
    http://extjs.com/deploy/dev/docs/

  8. #8
    Ext User
    Join Date
    Oct 2008
    Posts
    18
    Vote Rating
    0
      0  

    Default misspelt id sorry it does work!

    hey ritesh!

    doing a in the firebug console does work!
    Code:
    Ext.getCmp('ateam-viewform-athgrid').store.load();
    Now how do I get it into the code

  9. #9
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
      0  

    Default

    better way to avoid mispels of id :
    your grid config should be like...
    Code:
    listeners : {
              render: function(comp){
                 comp.store.load();
              }
         }

  10. #10
    Ext User
    Join Date
    Oct 2008
    Posts
    18
    Vote Rating
    0
      0  

    Default

    ritesh,

    i did the following to my grid config:

    Code:
    listener: {
                    render: function(comp){
                        comp.store.load({
                            params: {
                                sport_id: //insert a parameter
                            }
                        })
                    }
                }
    the store doesnt load with the parameter though and there is still no loadmask.

Page 1 of 3 123 LastLast

Posting Permissions

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