PDA

View Full Version : multiple call for Ext.window from a button



gege59
2 Dec 2010, 8:32 AM
Hi,

I have an html code with buttons which execute product_window command onClick. (from sencha Hello World Demo but with multiple buttons)









Hello Dialog




Hello...





... World!








etc...


And my function is:



function product_window(id){

var win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'close',
plain: true,
title: id,
modal: true,
items: new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
}),

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.close();
}
}]
});
//return win;
win.show(this);
}


The problem is when I close the window and re-click on one of these buttons, the new window appears inside the old window... if i click an other time, the new window appears inside the windows which is inside the older window :)

I thought it was due to win variable, and I tried to destroy, close, remove it without any success. (with these function win doesn't exist anymore)

any idea ?

Thanks !

winklerd
2 Dec 2010, 9:44 AM
A few problems:

1) Try win.show() instead of win.show(this). In the example, 'this' refers to the button that was clicked. In your code, it's a reference to the function object you're calling it from, which is not a page element.
2) For your close button handler, it's referring to the variable 'win' which doesn't exist when the function is called. Again, in the example, win is a global variable. In your example, the variable is only defined in the scope of the function product_window

Don't know if either of these are causing your issue, but they will probably cause SOME issues

winklerd
2 Dec 2010, 9:58 AM
I ran your code. With it as is, I do not see the behavior you describe. I changed the closeAction to 'hide' and I was able to see it.

The problem is that when you click close, it hides the window but it's still present in the DOM. Notice that in the example it looks for the existence of win (which is a global variable) before it creates the window.

gege59
3 Dec 2010, 12:44 AM
Thank you for you help.
I tried to use a global variable or inside the function.
I tried to check the availability of the win variable, if yes win.destroy()

But it seems that the variable is not re-created.

"Uncaught TypeError: Cannot read property 'dom' of null" When I use win.destroy() or win.close() on close.

Animal
3 Dec 2010, 12:49 AM
Why copy/paste code that you do not understand?

It's never going to work.

Do you know what applyTo does, or why you are using it?

Do you think its appropriate to create a window from the same applyTo element on every click?

DECIDE what you require your application to DO.

THEN.

Write it to do that.

Copy/paste will get you nowhere.

gege59
3 Dec 2010, 12:58 AM
For me, ApplyTo will show an object (in my example, a window) into a .
The expected behaviour I want, is when i'm using applyto two times in the same data inside this div are removed and the new window will appears.

What to you mean by "Do you think its appropriate to create a window from the same applyTo element on every click?" ?

Do you want me to create x , and x different applyTo ?
Because, this is only an example I sent you, and I have more than 50 buttons (which are generated thanks to Ext.template from Grid datas)

and I'm just triyng to learn Extjs with examples.

I just want to, generate a lot of buttons, which open a window, and each button send a string as an argument to print a different page according to the string sent.

Condor
3 Dec 2010, 1:06 AM
No, applyTo will use the specified element as the main element for the component (so you can't use it again for another component!).

You are looking for 'renderTo', which will render the component inside the specified element.

ps. Do you really want to use existing HTML markup to create your Ext components? It's usually better to start with an empty <body> and let Ext do all the component rendering.

winklerd
3 Dec 2010, 6:35 AM
Sorry, now you've got 3 people shouting answers at you. ;)

You CAN use applyTo if you only ever need 1 of the window object. closeAction must be 'hide' in this case and you MUST use the same window object every single time... you can use setTitle() and update() to change the appearance of the window.

IF you want a different window each time or if you might need to have multiple windows open at a time, closeAction should probably not be set (defaults to 'close') and you definitely do not want to use applyTo

I recommend developing in Firefox with the Firebug extension installed and activated. It allows you to see exactly what's happening to the DOM and the HTML on the page. For instance, if you used Firebug while running your code, you would see that after closing the window, the DIV element is gone (since it was used as the main element of the component, which is now gone).