PDA

View Full Version : LoadMask customizing it and dom, el en Ext.getBody() questions.



jorgeluislay
12 Nov 2012, 12:42 PM
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 (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.LoadMask-method-constructor)( el, config ) : Ext.LoadMask (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.LoadMask)Create 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 (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.LoadMask)


Please Help, im very very deseperate :(

willigogs
12 Nov 2012, 3:08 PM
Use Ext.getCmp('grid').getEl()

sword-it
13 Nov 2012, 4:08 AM
To give some more detail,

new Ext.LoadMask (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.LoadMask-method-constructor)( el, config ) : Ext.LoadMask (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.LoadMask)Create 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
13 Nov 2012, 9:48 AM
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
13 Nov 2012, 9:54 AM
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
13 Nov 2012, 10:36 AM
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
14 Nov 2012, 1:50 AM
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
18 Nov 2012, 5:11 AM
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
19 Nov 2012, 2:54 AM
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
21 Nov 2012, 2:57 PM
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!