PDA

View Full Version : change particular window modal color



sandy52
24 Feb 2014, 10:57 PM
Hi,
Please i need help urgently, i want to change particular mask(modal) color of window. Can anyone know how to change it.

Thanks & Regards,
Sandy

mdnaveed42
24 Feb 2014, 11:23 PM
Hi,

Following logic may work for you,

Logic is before opening the modal set class on body and before close of modal remove it.
With the applied class on the body override the "x-mask" css class.

Sample code:

var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
modal: true,
layout: 'fit',
listeners: {
beforeclose: function(comp, opt) {
Ext.getBody().removeCls('custom-modal');
}
},
items: {
xtype: 'textfield',
text: 'Custom Modal'
}
});


Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
Ext.getBody().addCls('custom-modal');
win.show();
}
});

CSS:
.custom-modal .x-mask {
/* Apply CSS as per your requirement */
background-color: #000;
}



Thanks,
Md Naveed
\m/

sandy52
25 Feb 2014, 2:00 AM
Hi Naveed,
It's not working, i have different windows and grids , on that windows i am showing a popup window for message i want to change color of that window mask

Piruthu
25 Feb 2014, 3:26 AM
try this: https://fiddle.sencha.com/#fiddle/196

customStyle is added on 'show' event of the window

sandy52
25 Feb 2014, 4:02 AM
i tried that but x-mask is not fix in my case on my form it will have more than one .x-mask div if i do that it will change other x-mask div style i want only that window mask to change

Piruthu
26 Feb 2014, 3:32 AM
try removeCls on hiding the window, so other mask's will not get affected .. updated the fiddle: https://fiddle.sencha.com/#fiddle/196