LoadMask customizing it and dom, el en Ext.getBody() questions.

[jorgeluislay]

Hi!

I need help.. again -.- If you know something, just post, whatever you can, i will definitely read it!

So i am having a grid which it aoutoload and i use a loadMask which is configured by myself like this:

    loadMask: new Ext.LoadMask(Ext.getBody(), {
        msg : '<p align="center">Lade Daten... </p><br>'
            + '<button class="x-btn-wrap x-btn billWide x-btn-text" onclick="'
            + 'Ext.Ajax.abort(Ext.getCmp(\'Grid\').getStore().proxy.getConnection().transId);'
            + 'Ext.getBody().unmask();'
            + 'Ext.getCmp(\'search\').enable();'
            + '">Abbrechen</button>'
        }), 

So, what i want is to set the loadMask to the grid with id: 'grid' but it doesnt work. When i put instead of Ext.getBody() -> Ext.getCmp('Grid'), it doesnt reconize it and than ii doesnt unmask the grid.

Whats the difference betwenn el and dom ?

Can someone tell me if -> Ext.getCmp("grid") == Mixed: el <- is or whats the difference to this ->Ext.getBody() <- ?

The API say this:

newExt.LoadMask( el, config ) : Ext.LoadMaskCreate a new LoadMask
Available since: Ext 1
Parameters

• el : MixedThe element or DOM node, or its id <-- whats this ?
• config : ObjectThe config object <-- whats this ?

Returns

Ext.LoadMask


Please Help, im very very deseperate

[willigogs]

Use Ext.getCmp('grid').getEl()

[sword-it]

To give some more detail,

new Ext.LoadMask( el, config ) : Ext.LoadMaskCreate a new LoadMask

here "el" means the element of the component which you would like to show the mask on.

var yourGrid = Ext.getCmp('idOfYourGrid'),
yourGridEl = yourGrid.getEl();

new Ext.LoadMask(yourGridEl, { ... });
or
new Ext.LoadMask('idOfYourGrid', { ... }); will do the job.

[jorgeluislay]

myapp.mygrid = Ext.extend(Ext.grid.GridPanel, {
id: 'mygrid',
loadMask: new Ext.LoadMask(Ext.getCmp('mygrid').getEl(), {
        msg : '<p align="center">Lade Daten... </p><br>'
            + '<button class="x-btn-wrap x-btn billWide x-btn-text" onclick="'
            + 'Ext.Ajax.abort(Ext.getCmp(\'mygrid\').getStore().proxy.getConnection().transId);'
            + 'Ext.getCmp(\'mygrid\').getEl().unmask();'
            + '">Cancel</button>'
        }),
initComponent : function() {
              reader, store ...
        Ext.apply(this, {
            store:store
              .
            cm: ..
              .
              .
            sm: ..
              .
              .
              .

        }); // eo apply
        // call parent
        myapp.mygrid.superclass.initComponent.apply(this,arguments);
    } // eo function initComponent
}); 

this doesnt work .. what i want to do is a cancel button in the autoLoad mask of a grid. Normaly when you pass this configuration to the grid:

autoload: true,

you have an autoload function, which will started at the very beggining of the application. now i want the posibility to stop this and at the same time to unmask the grid element

[sword-it]

The problem is you are trying to get component before it's defined.

Set loadMask property in afterRender method and apply it to "this" instance.

afterRender: function(){
Ext.grid.GridPanel.superclass.afterRender.apply(this, arguments);
this.loadMask = new Ext.LoadMask(this.el, { ... });
}

[jorgeluislay]

listeners: {
   'afterrender': function(){
     Ext.grid.GridPanel.superclass.afterRender.apply(this, arguments);
      this.loadMask = new Ext.LoadMask(Ext.getCmp('mygrid').getEl(), {msg:'..'});
                    }
                }, 

you mean like this ?

[willigogs]

You don't need to use the listener (although that would be another viable method).

SwordIT was literally meaning you should use this.el() instead of Ext.getCmp('mygrid').getEl().

Since you're still in the middle of declaring the object, then you cannot use the object's ID to grab the EXT component yet - hence you must use "this".

[jorgeluislay]

It still doesnt work!

So i am having this:

after "initComponents: "

        this.on('afterrender', function(){    
            var newMaske = new Ext.LoadMask(Ext.getCmp('myGrid').getEl(), 
            {       msg:'testtesttest'});   
        }, this); 

But it doesnt work. I also try to set loadMask: this.el(), or this.getEl() and it says, my this.el component is not defined.

This is very wierd, any help i will appreciate!

[willigogs]

Looking at your last two examples, it should work like the following:

listeners: {
    afterrender: function(thisPanel) {
        var newMaske = new Ext.LoadMask(thisPanel.getEl(), {msg:'testtesttest'});
        newMaske.show();
    }                
}

or...

this.on('afterrender', function(){    
    var newMaske = new Ext.LoadMask(this.getEl(), {msg:'testtesttest'});  
    newMaske.show(); 
}, this);

[jorgeluislay]

I add this to the listener of the store:

              'beforeload':{
                        fn: function(panel){
                             this.loadMask = new Ext.LoadMask(Ext.getCmp('myGrid').getEl(), 
                                            {
                                        msg:'testtesttest',
                                                removeMask: true
                                        });  
                                    this.loadMask.show();        
                        }
                    }, 

and to the 'load' listener this:

Ext.getCmp('myGrid').getEl().unmask(); 

Thank you for helping!