PDA

View Full Version : Active (and not inactive) Ext.LayoutDialog?



Episode1
10 Dec 2007, 7:44 AM
OK, slowly but surely wins the race... (I hope this translation makes sense?)

I try to build my first dialog on a form using Ext.LayoutDialog:

I understood that I have to place the definition of the dialogbox content (which is referred by the function) between some div tags placed on my page or form. So I put some pass-tru html at the end of my form and it works ... nearly:

The dialog is inactive / grayed ...(:|

Hmm, one hour later I found the reason: The dialog html markup has to be a direct child of the body-tag! But how can I enforce this? My domino based html always puts the necessary form-tags around my content, so my div-tag cannot be a direct child of body...

My workaround is, that I close the domino form-tag first followed by my dialog-div-tags. But is this the right way to solve this problem? As a former notes client developer I would like to have the layout of the dialog-boxed in a different place. Perhaps in a page? But how to refer to a page, when using Ext.LayoutDialog on a form?

mdm-adph
10 Dec 2007, 9:51 AM
You've come across the same problem that I had, too -- how to get around that pre-made <form> tag that the Domino server sticks in? I tried always putting a "</form>" in Pass-Through HTML, too, but like you, it just looks sloppy (though it works).

So, I use this function to create a dialog object at onload() that I can use in a BasicDialog object -- just run the function (the only required parameter is "theID", which you later use in your BasicDialog creation). It'll create a <div> object that'll be safely outside the premade Domino <form>:


function createDialogObject (theID, theTitleID, theTitle, theBodyID, theBody) {

var dlgObj =
Ext.DomHelper.insertAfter(
Ext.DomQuery.selectNode("form"),
'<div id="' + theID + '"></div>',
true
)
.setStyle({visibility: "hidden", position: "absolute"});

Ext.DomHelper.append(
dlgObj,
'<div class="x-dlg-hd" id="' + theTitleID + '">' + theTitle + '</div>'
);

Ext.DomHelper.append(
dlgObj,
'<div class="x-dlg-bd" style="padding: 10px">'
+ '<div id="' + theBodyID + '">' + theBody + '</div>'
+ '</div>'
);
}It's a quick hack, but it works just fine for me!

jratcliff
10 Dec 2007, 3:00 PM
For the PickList in Ext.nd.UIWorkspace we use 'autoCreate:true' so that we don't have to depend on any existing markup/pass-thru html on the form.



var dialog;
if (!dialog) {
dialog = new Ext.LayoutDialog('xnd-picklist', {
autoCreate: true,
modal:true,
width:this.width,
height:this.height,
shadow:this.shadow,
minWidth:this.minWidth,
minHeight:this.minHeight,
title:this.title,
north : {
titlebar : true
},
center : {
autoScroll:true
}
});
dialog.addKeyListener(27, handleOK, this);
dialog.addButton('OK', handleOK, this);
dialog.addButton('Cancel', handleCancel, this);

// create layout
var layout = dialog.getLayout();
layout.beginUpdate();

// add prompt panel
var promptPanel = layout.add('north', new Ext.ContentPanel('xnd-picklist-prompt', {
autoCreate : true,
title : this.prompt
}));

// create view panel
var viewPanel = layout.add('center', new Ext.ContentPanel('xnd-picklist-view', {
autoCreate : true,
title : this.title,
closable : false,
fitToFrame : true
}));

// now create the view
this.uiView = new Ext.nd.UIView(Ext.apply({
container : viewPanel,
viewUrl : this.viewUrl,
gridHandleRowDblClick : handleOK.createDelegate(this),
showSingleCategory : this.showSingleCategory,
emptyText : this.emptyText,
showCategoryComboBox : this.showCategoryComboBox,
categoryComboBoxCount : this.categoryComboBoxCount
},this.viewOptions));

// tell the layout we are done so it can draw itself on the screen
layout.endUpdate();

}

// now show our custom dialog
dialog.show();

mdm-adph
11 Dec 2007, 6:37 AM
:-/ Figures -- I had never even looked at the LayoutDialog class. You really do learn something new everyday.