PDA

View Full Version : Adding Button or cancel icon to ExtJs mask



webfriend13
17 May 2012, 7:26 PM
Hi Guys,

Is there any way to add a button over ExtJs mask. I have been looking for this for a while but not able to add a button over the mask :(

Please share your suggestion or code snippets.

Thank you

sword-it
17 May 2012, 9:49 PM
Hi,
you can use Ext.Window with config modal:true

It will create a mask in the background of your window....also you may put whatever you want in your window...a button, label or anything...

or if you don't want to use a window,the following would be possible but the button would look like a standard html button not a ExtJS button.



ExtCmp.getEl().mask('<p align="center"><input type="button" value="Button" /></p>' );

webfriend13
29 May 2012, 6:34 PM
Hi Sword-IT,

Thank you for quick reply. If possible, please provide some code sample using Ext.Window.

Thank you.

sword-it
29 May 2012, 11:03 PM
HI!

Try This:-




Ext.onReady(function () {
win = new Ext.Window({
width: 100
, height: 80
, draggable: false
, border: false
, modal:true
, resizable:false
, items: [
{
xtype: 'button',
name: 'sampleButton',
text: 'Click me',
style:'margin:15px',
width:50
}
]
})
win.show();
})



Output:-

35737

webfriend13
30 May 2012, 1:25 AM
HI SWORD-IT,

Thank you for quick reply. I am not sure how i can use window object in my case. When user clicks a button, I show mask over a tab using following code.:
tab.setLoading('Loading data');
This shows a mask over the tab.
When the processing is over, I use tab.setLoading(false); to hide the mask.

How can I implement the solution you are suggesting?

webfriend13
26 Jun 2012, 12:04 AM
Hi,
you can use Ext.Window with config modal:true

It will create a mask in the background of your window....also you may put whatever you want in your window...a button, label or anything...

or if you don't want to use a window,the following would be possible but the button would look like a standard html button not a ExtJS button.



ExtCmp.getEl().mask('<p align="center"><input type="button" value="Button" /></p>' );




HI Sword-IT,

I tried using below code and with this I am able to show a cancel button over the mask. I am not able to add the handler for the cancel button. I am using ExtJs 4.1 (MVC)



ExtCmp.getEl().mask('<p align="center"><input type="button" value="Button" /></p>' );