Form or subform in a dialog with Ext.nd

[Phil Randolph]

Can a Domino form or subform be called from a form action and displayed in an Ext or Ext.nd dialog, get user interaction (similar to a picklist call in Ext.nd.UIWorkspace), then pass the data (in whatever way) back to the calling form/document?

I'm trying to simulate what is being done now in the Notes Client when I do the following type of thing:

@DialogBox( "dlgReviewText" ; [AutoHorzFit] : [AutoVertFit] : [SizeToTable] : [NoCancel] : [NoOkCancel]);

And then I have a form setup to be used as a dialog and then return stuff back to the main form.

The only things I have seen so far are variations on the picklist call, hoping there are more advanced dialog style calls available.

[jratcliff]

Maybe you can use Ext.Window and pass it the url to the form?

[Jan K]

Hi Phil.

Here's a Dialogbox function, which I created and uses with great success. It's based on Ext 1.1 as I haven't got the time to upgrade to Ext 2.0 yet. So it uses a LayoutDialog. The callback function gets a handle to the document object of the form opened in the dialog. So it's possible to do anything with the document from there. Even submit it, if you like.

It's also possible to pass a validation function to the form, which is executed, when pressing the OK button.

Here's a example of use:


var wrkspc = new Ext.nd.ux.UIWorkspace();
wrkspc.DialogBox(this, {
formName: "DialogForm",
width: 800,
height: 550,
title: "Add Entry",
callback: function (doc) {
//do something with the document like this
Ext.get('FieldName').dom.value = doc.getElementById('FieldId').value;
},
validateFunction: function (doc) {
if (doc.getElementById('FieldId').value == "") {
Ext.MessageBox.alert('Information', 'Field has to be filled in');
return false;
}
return true;
}
});Here's the function, which I've placed on an extension of the Ext.nd.UIWorkspace.



DialogBox : function(elem, config) {
var dialog, cb, iframe, validate;
var sess = Ext.nd.Session;
var db = sess.CurrentDatabase;

// defaults
this.server = "";
this.dbPath = db.WebFilePath;
this.formName = "";
this.width = 600;
this.height = 400;
this.shadow = true;
this.minWidth = 500;
this.minHeight = 400;
this.proxyDrag = true;
this.params = "";

this.title = "DialogBox";
this.prompt = "Please fill out fields and press OK.";

// override defaults with config object
Ext.apply(this,config);

// move the callback and validate function to a local variable
if (this.callback) {
cb = this.callback;
this.callback = false;
}
if (this.validateFunction) {
validate = this.validateFunction;
this.validateFunction = false;
}

// remove/destroy old container
var pl = Ext.get('xnd-dialog');
if (pl) {
pl.remove(); // if one already exists, remove it so we can build another
}

// build the dialog
if(!dialog){
dialog = new Ext.LayoutDialog("xnd-dialog", {
autoCreate: true,
modal: true,
width: this.width,
height: this.height,
shadow: this.shadow,
minWidth: this.minWidth,
minHeight: this.minHeight,
proxyDrag: this.proxyDrag,
title: this.title,
north: {
titlebar: true
},
center: {
autoScroll: true
}
});

dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('OK', handleOK, dialog);
dialog.addButton('Cancel', dialog.hide, dialog);

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

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

// create form panel
if (this.formName == '') {
var link = this.dbPath + this.params;
} else {
var link = this.dbPath + this.formName + "?OpenForm" + this.params;
}
iframe = Ext.DomHelper.append(document.body, {tag: 'iframe', frameBorder: 0, src: link});
var formPanel = layout.add('center', new Ext.ContentPanel(iframe, {
autoCreate : true,
title : "Entry",
closable : false,
fitToFrame : true
}));

layout.endUpdate();
} // end if(!dialog)

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

function handleOK() {
// get a handle to the document in the iframe
var doc = iframe.contentWindow.document;

// if a validate function has been defined, call it before closing the dialogbox
if (validate) {
if (!validate(doc)) {
return;
}
}

dialog.hide();

// if a callback has been defined, call it and pass the array of return values to it
if (cb) {
cb(doc);
} else {
return doc; //only usefull if async = false, otherwise your code won't be able to process
}
}

function handleCancel() {
dialog.hide();
if (cb) {
cb(null);
} else {
return null;
}
}
//end Dialogbox
}