custom LayoutDialog problem

[code_berzerker]

I have coded my custom LayoutDialog based on ExampleDialog from documentation examples. heres the complete code defining that 'premade dialog':



var LayoutDialog = function()
{
var dialog;
var frm;

/*var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('ytheme-gray');
};*/
// return a public interface
return {
init : function()
{
$('#doc-body').append('\
<div id="layout-dialog" style="visibility:hidden;">\
<div id="layout-dialog-title" class="x-dlg-hd">Dialog title</div>\
\
<div class="x-dlg-bd">\
<div id="layout-dialog-north" class="x-layout-inactive-content" style="padding:10px; text-align: left;">\
North\
</div>\
<div id="layout-dialog-center" class="x-layout-inactive-content" style="padding:10px; text-align: left;">\
<p>Center</p>\
</div>\
</div>\
</div>\
');
},

showDialog : function(elExt, config)
{
if( !config)
{
config =
{
dialogTitle: 'Dialog title',
northCollapsible: false,
northTitle: 'North',
northContent: 'North content',
northTitlebar: false,
centerTitle: 'Center',
centeralwaysShowTabs: false,
centerCloseOnTab: false
}
}
$('#layout-dialog-title').html(config.dialogTitle);
$('#layout-dialog-north').html(config.northContent);
if( !dialog)
{ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("layout-dialog", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
north: {
split:true,
initialSize: 50,
minSize: 10,
maxSize: 250,
titlebar: config.northTitlebar,
collapsible: config.northCollapsible,
animate: true
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: config.centerCloseOnTab,
alwaysShowTabs: config.centeralwaysShowTabs
}
});
dialog.addKeyListener(27, this.processClose, dialog);
dialog.addButton('Zapisz', dialog.hide, dialog);
dialog.addButton('Zamknij', this.processClose, dialog);

var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('layout-dialog-north', {title: config.northTitle}));
layout.add('center', new Ext.ContentPanel('layout-dialog-center', {title: config.centerTitle}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Another Tab', background:true}));
// generate some other tabs
/*layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Another Tab', background:true}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Third Tab', closable:true, background:true}));*/
layout.endUpdate();
}
if(elExt)
dialog.show(elExt.dom);
else
dialog.show();
},
deInit : function()
{
dialog.destroy(true);
dialog = null;
frm = null;
this.destroy();
$('#layout-dialog').remove();
},
processClose : function()
{
var close = true;
if(frm && frm.process)
close = frm.process();
if(close)
{
dialog.hide();
this.deInit();
}
}
};
}();


Here is code I use to initialize the dialog (html element with id="pass_butt" needed for this):



var buttPass = new Ext.Button('pass_butt', {
id: '_pass_butt',
text: 'Edycja',
handler : function()
{
LayoutDialog.init();
LayoutDialog.showDialog(
buttPass,
{
dialogTitle: 'Formularz zmiany hasła',
northCollapsible: false,
northTitle: '',
northContent: 'Wpisz stare hasło oraz nowe dwukrotnie.',
northTitlebar: false,
centerTitle: 'Center',
centeralwaysShowTabs: false,
centerCloseOnTab: false
}
);
}
});


Dialog properly pops up when the button is clicked.

Now I have two problems with this code:

1st MAJOR problem is that I get following error in firebug: "this.deInit is not a function" in the line marked red in code above. I dont understand why it is not defined. I defined it the same way as "processClose" which works without any problem. I hope someone could explain me why.

2nd minor problem is that there is no animation when showing the dialog and I have no idea why, because its alomost the same code as in doc example. Only difference I noticed is that element at which animation begins is in my case a button which is created as table contaning button and not like in example input type button.

[jsakalos]

1st MAJOR problem is that I get following error in firebug: "this.deInit is not a function" in the line marked red in code above. I dont understand why it is not defined. I defined it the same way as "processClose" which works without any problem. I hope someone could explain me why.

See this: What is that "scope" all about? (http://extjs.com/forum/showthread.php?t=6336)

[code_berzerker]

Well I know now that if I put 'LayoutDialog' instead of 'this' it works, but I dont understand the difference between these two lines:



dialog.addButton('Zapisz', this.processSubmit, dialog);

this.deInit();


Thats probably because I dont fully understand the idea of 'public interface' thing. I could use some guidance :) Any good article I could read about that?

Additionaly:

3rd minor issue: can I replace/extend action executed when clicking close button on dialog titlebar? (Other than listening to 'hide' event).