PDA

View Full Version : Window Shadowing



sumukh
24 Jun 2009, 12:10 AM
I am trying to fade out a window which has a OK button on it.
But I a facing a strange issue... When the window fades out it leaves a shadow behind.

Not able to find a workaround.

Please help.

pmatsumura
24 Jun 2009, 12:13 AM
Could you please provide some sample code? Which Ext version are you using?

sumukh
24 Jun 2009, 12:22 AM
Ext Version : 2.2

Code starts here:



sam.ui.common.FadeOutWindow = Ext.extend(Ext.Window, {

/**
* This funciton calls the fadeOut() method of Element on Window, Window's Shadow & the masks the background.
*/
animHide: function(){
this.el.fadeOut({
endOpacity: .50,
duration: 7,
easing: 'easeOut',
useDisplay: false,
remove: false
});

Ext.fly(this.el.dom.previousSibling).fadeOut({endOpacity: 0.40,
duration: 3}); // shadow

Ext.fly(this.el.dom.previousSibling.previousSibling).fadeOut({endOpacity: 0,easing: 'easeOut',
duration: 7}); // mask
},



/**
* This function will initialize FadeOutWindow to display pop in window which fades
* out after a specified interval of time.
*/
initComponent: function(){
this.width = 422;
this.plain = true;
this.baseCls = 'common-window-addtag';
this.header = true;
this.modal = true;
this.resizable = false;
this.shadow = false;
this.closable = false;
this.floating = true;


this.innerPanel = new Ext.FormPanel({
labelWidth: 85,
ctCls: "common-window-panel",
autoWidth: true,
height: 95,
border: false,
bodyBorder: false,
hideBorders: true,
/*bodyStyle: 'padding-top:2px;',*/
items: [{
xtype: 'label',
id: 'deleteField',
html: '<div class="common-align-left common-font-bold common-addcomment-padding-left">' + this.localizationSet.getLocalizedString('common_addeditcomment_comfirmation_text'),
height: 50,
ctCls: 'common-label-css'
}],
buttons: [{
text: this.localizationSet.getLocalizedString('common_manage_statuspopin_ok'),
disabled: false,
ctCls: 'common-x-btn',
handler: this.okPost.createDelegate(this),
scope: this
}]

});

this.items = [this.innerPanel];
sam.ui.common.FadeOutWindow.superclass.initComponent.call(this);
},

/**
* This function is called when the user clicks on OK button
*
*/
okPost: function(){
alert('in ok post');
this.close();
this.onDestroy();
},

/**
*
*/
onDestroy: function(){
sam.ui.common.FadeOutWindow.superclass.onDestroy.call(this);
}
});