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 ?