PDA

View Full Version : Dialog Oddities - No dragging, Titles Issues and more



alindsay55661
23 Feb 2007, 9:59 AM
Hello all,

I have run into an issue when destroying an autoCreated dialog and then autoCreating another one on the same page. The second dialog has strang behavior such as no dragging abilities and my title is also not updating. The reason I am destroying and recreating the dialog is so that I can change the function call for the Submit button. Is there a way to change a button's function call after its already been created?

Here is my dialog code:



var dialog;

// create the HelloWorld application (single instance)
var myDialog = function(){

// return a public interface
return {
init : function(){
dialog = new Ext.BasicDialog("mydlg", {
autoCreate: true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
draggable: true,
modal: true
});

dialog.setDefaultButton(dialog.addButton('Cancel', hideDialog, dialog));
dialog.show();
}
};
}();


and here is my show and hide dialog functions



function hideDialog()
{
dialog.hide();
dialog.destroy();
}

function showDialog(title, url, func)
{
myDialog.init();
dialog.setTitle(title);
dialog.addButton('Submit', func, dialog);
dialog.resizeTo(501, 301);
var el = Ext.get(dialog.body);
var mgr = el.getUpdateManager();
mgr.update(url);
}


Note that I added the resize due to a bug where on initial render the dialog title would only display half way (like it was behind the body or something).

As described before, when a second or third or fourth dialog pops up the title value does not get set (using setTitle) to what is passed in, it keeps the first title it was given. Does that mean that the destroy method is not really destroying the dialog elements from the DOM?

alindsay55661
23 Feb 2007, 10:22 AM
Found the problem. Had to use destroy(true) instead of destroy().

Excellent!

tryanDLS
23 Feb 2007, 10:29 AM
You can change the handler without destoying the dialog using setHandler.


// assumes you got a ref to the dialog button
myBtn.setHandler(myFunc, foo); // foo is the scope

alindsay55661
23 Feb 2007, 11:02 AM
Awesome, thanks tryanDLS, this helps me avoid a few other issues as well, much appreciated.

alindsay55661
23 Feb 2007, 12:04 PM
TryanDLS,

I hate to be so ignorant but I am and I need some more guidance. I am having trouble changing the handler for the button and I get the following error:

"dialog.submitButton has no properties"

Here is my dialog code:



var dialog;

// create the HelloWorld application (single instance)
var myDialog = function(){

// return a public interface
return {
init : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("mydlg", {
autoCreate: true,
title: null,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
draggable: true,
closable: false,
modal: true
});

var submitButton = dialog.addButton('Submit', hideDialog, dialog);
dialog.setDefaultButton(dialog.addButton('Cancel', hideDialog, dialog));
}

}
};
}();

Ext.onReady(myDialog.init, myDialog, true);


And my showDialog function:



function showDialog(title, url, func)
{
dialog.setTitle(title);
dialog.submitButton.setHandler(func, dialog);
dialog.show();
dialog.resizeTo(501, 301);

var el = Ext.get(dialog.body);
var mgr = el.getUpdateManager();
mgr.update(url);
}


Am I properly creating a reference to my Submit button?

alindsay55661
23 Feb 2007, 12:46 PM
Found the problem,

I had to declare the submitButton variable outside the myDialog block to make it global. Is there a better way to do this?

Thanks.

tryanDLS
23 Feb 2007, 12:51 PM
You're declaring submitButton as local var to the init fn. The better way to do this is just save a ref on the dialog so you don't have to track extra vars around and/or worry about scope. To avoid possible clashes with existing properties in Dialog, follow a logical naming convention.

dialog._submitBtn = dialog.addButton(.....)
//later
dialog._submitBtn.setHandler(...)

alindsay55661
23 Feb 2007, 2:38 PM
Awesome, thank you very much, I appreciate the education and solution.