PDA

View Full Version : [Solved]Problem with Ext.Window hide() and show()



mjoksa
27 Nov 2007, 5:11 AM
I've problem with hiding and showing window. HTML code for my window is:


<div id="upload-dlg" class="x-hidden">
<div class="x-window-header">Upload File(s) Dialog</div>
<div id="upload-dlg-center" class="x-window-body" style="padding:10px">
<asp:FileUpload runat="server" ID="fuTestFile1" style="width: 100%" />
<asp:FileUpload runat="server" ID="fuTestFile2" style="width: 100%" />
<asp:FileUpload runat="server" ID="fuTestFile3" style="width: 100%" />
<asp:FileUpload runat="server" ID="fuTestFile4" style="width: 100%" />
<asp:FileUpload runat="server" ID="fuTestFile5" style="width: 100%" />
<div style="text-align:center; display: none"><cc1:UploadProgress ID="UploadProgress1" runat="server" /></div><br />
<div id="upload-button" style="text-align:center"><input type="submit" id="btnUpload" value="Upload" onclick="startUpload();" style="width: 100px" /></div>
<asp:Literal ID="ltResults" Text="" runat="server" /><br />
<div style="display:none" id="uplProgress">
<div id="uplStatus" style="text-align: center">Upload Progress:</div>
<div id="uploadBar" style="width:100%;"></div>
</div>
</div>
</div>

I need this to be just like it is, cause this dialog is used for uploading files with some ASP controls. To create dialog I use new Ext.Window with closeAction: 'hide' option. When window is shown for the first time everything is ok (attached picture 1), then I hide it with hide() function and then show it again with show() function, dialog is resized and some of it controls are duplicated (attached picture 2).
This happens in IE7 and Firefox2 (not tested in other browsers).
Is there any way to manage this behaviour and solve my problem?

catacaustic
27 Nov 2007, 2:12 PM
I've had this same issue myself a while back. This comes from the form, not the window. I'm going to guess that when you call the function to display the window, you create the form? If you do that each time, it will add a new form with new elements each time, giving you what you have there. You need to check if the form has already been created, and if so, don't create it again.

brookd
27 Nov 2007, 8:08 PM
If your application has a ton of windows and forms, should it keep the form hidden but available after creating it, or should it be destroyed when the window closes?

hendricd
27 Nov 2007, 8:11 PM
If you posted your window and form constructors, we might pick it out.

mjoksa
28 Nov 2007, 12:51 AM
I do not use any ext forms in this window, just create it as shown in text below:


var hftUploadFilesDialog = function(originalScope) {
this.originalScope = originalScope;

///HANDLERS
this.onUploadClicked = function()
{
Ext.MessageBox.alert('Information', 'This option is not implemented, yet.');
}

this.onCancelClicked = function()
{
this.onClose.call(this);
}

this.onClose = function()
{
this.dialog.hide();
//this.dialog.destroy();
//this.dialog.close();

//Ext.WindowMgr.getActive().close();

this.originalScope.activeDialog = null;
}

///CONTROLS
this.dialog = new Ext.Window({
el: 'upload-dlg',
layout: 'fit',
closable: false,
closeAction: 'hide',
hideMode: 'offsets',
collapsible: false,
resizable: false,
manager: new Ext.WindowGroup(),
width: 530,
height: 300,
//border:false,
plain: true,
modal: true,
keys: {
key: Ext.EventObject.ESC,
fn: this.onCancelClicked,
scope: this
},
buttons: [
{
id: 'btnClose',
//cls: 'x-btn-text-icon hft-logout',
text: 'Close',
handler: this.onCancelClicked,
scope: this
}
]
});

this.dialog.show(this);
}

This code is used just like this.activeDialog = new hftUploadFilesDialog(this);

I also tried every option for closeAction and hideMode, but nothing seems to do no good for me.
10x

mjoksa
28 Nov 2007, 2:10 AM
I played with firebug and notice this - when dialog is opened for the first time Ext rendered div for showed in File1. When dialog is rendred second time Ext rendered div showed in File2. Maybe this can help anyone to tell me if this is some kind of Ext bug or am I doing something wrong.

hendricd
28 Nov 2007, 6:25 AM
For your case, try it this way:



var hftUploadFilesDialog = function(originalScope) {
this.originalScope = originalScope;

///HANDLERS
this.onUploadClicked = function()
{
Ext.MessageBox.alert('Information', 'This option is not implemented, yet.');
}

this.onCancelClicked = function()
{
this.onClose.call(this);
}

this.onClose = function()
{
this.dialog[this.dialog.closeAction]();
this.originalScope.activeDialog = null;
}

///CONTROLS
this.dialog = new Ext.Window({
applyTo: 'upload-dlg',
layout: 'fit',
autoShow:true,
closable: false,
closeAction: 'hide',
//hideMode: 'offsets',
collapsible: false,
resizable: false,
//manager: new Ext.WindowGroup(), new group for each window??
width: 530,
height: 300,
//border:false,
plain: true,
modal: true,
keys: {
key: Ext.EventObject.ESC,
fn: this.onCancelClicked,
scope: this
},
buttons: [
{
id: 'btnClose',
//cls: 'x-btn-text-icon hft-logout',
text: 'Close',
handler: this.onCancelClicked,
scope: this
}
]
});

this.dialog.show(this);
}

mjoksa
28 Nov 2007, 7:30 AM
@hendricd
I've tried with your changes, but that only moved my dialog up (now it cannot be seen whole on screen). Problem with doubled area remained.
I'm open for any suggestion about this.

mjoksa
29 Nov 2007, 2:13 AM
First, I want to thamk everyone who tried to help me with my problem regarding hiding and showing Ext window with some ASP controls. As allways, most simpliest solution is the best one :). Below is changed dialog code and now it works perfectly.


var hftUploadFilesDialog = function(originalScope) {
this.originalScope = originalScope;

///HANDLERS
this.onUploadClicked = function()
{
Ext.MessageBox.alert('Information', 'This option is not implemented, yet.');
}

this.onCancelClicked = function()
{
this.onClose.call(this);
}

this.onClose = function()
{
this.dialog.hide();
}

if(!this.originalScope.activeDialog)
{
///CONTROLS
this.dialog = new Ext.Window({
el: 'upload-dlg',
layout: 'fit',
closable: false,
closeAction: 'hide',
collapsible: false,
resizable: false,
width: 530,
height: 300,
//border:false,
plain: true,
modal: true,
keys: {
key: Ext.EventObject.ESC,
fn: this.onCancelClicked,
scope: this
},
buttons: [
{
id: 'btnClose',
text: 'Close',
handler: this.onCancelClicked,
scope: this
}
]
});
}
else
{
this.dialog = this.originalScope.activeDialog.dialog;
}

this.dialog.show(this);
}


As I mentioned earlier I use this code in this way:


this.activeDialog = new hftUploadFilesDialog(this);


I hope this can help anyone with same or similar problem.