PDA

View Full Version : My first beginner-problems solved... (BasicDialog)



Episode1
8 Jan 2008, 2:50 AM
OK, I had a lot of trouble using a simple dialog on my Ext.nd.form: The dialogs worked only twice; grey shadow was left, when I closed my dialog. I think I didn't understand the whole idea when Ext.onReady fires, and why and where use a MyApp or DemoApp object (and also knowledge of object oriented java script is missing...).

With help of a guy here in germany now I am able to put a custom dialog behind a button on my form. Since I did not find solutions for such simple tasks here, I think it's useful to share or discuss this simple code for beginners like me:

Starting with a simple form and field "Customer". A button on this form I should fill this field by using a custom ext BasicDialog. Here's the js code for this button:



//Define content-form of dialogbox
dialogForm = new Ext.form.Form({});
dialogForm.add(
//Define field for dialogbox
new Ext.form.TextField({fieldLabel: 'FillCustomer', name: 'FillCustomer', width: 160, allowBlank: true})
);

//Create Ext BasicDialog
dialog = new Ext.BasicDialog('edit-dlg',{autoCreate: true, title: 'My Dialog', modal:true,
width:300,
height:200,
shadow:true,
minWidth:100,
minHeight:100,
proxyDrag: true});


// Button to set field on the form
dialog.addButton('Set field', function(){ Ext.get("Customer").dom.value = Ext.get("FillCustomer").dom.value; dialog.destroy(true);}, dialog);

//Close dialog without action with ESC or Close
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

//Put focus into first field when opening dialog
dialog.on('show', function(){
dialogForm.items.item(0).focus();
});

//Render dialog content form into BasicDialog
dialogForm.render(dialog.body);

//Show dialog
dialog.show();


I know that with this example the whole object oriented idea is missing, but for me it's much easier to step into Ext and Ext.nd with my old fashioned way...

Jan K
8 Jan 2008, 10:56 PM
Hi.

Thanks for sharing. I've just recently started using Ext.nd, so all examples are very appreciated.

I've created a DialogBox function, which are quite general. It has been very useful to me, so perhaps you can use it or part of it. I've created it in the UIWorkspace class, so it's easy to use everywhere needed:


Ext.namespace('Ext.nd.ux');

/* ==== Ext.nd.UIWorkspace ==== */
Ext.nd.ux.UIWorkspace = function(config){
Ext.nd.ux.UIWorkspace.superclass.constructor.call(this, config);
};

Ext.extend(Ext.nd.ux.UIWorkspace, 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
}It opens an URL or another form in an iframe in a dialogbox. It returns a handle to the document in the iframe, so the further handling of the form values from the dialogbox can be coded specific for each call. Or the document can be submitted, if needed. It's also possible to provide a validation function, which are called on the dialogbox, when pressing OK.

Here's an example of use:


var wrkspc = new Ext.nd.ux.UIWorkspace();
wrkspc.DialogBox(this, {
formName: "DialogBoxForm",
width: 600,
height: 450,
title: "Add Entry",
callback: function (doc) {
if (doc) {
//do something with the field values from the dialogbox
Ext.get('MainFormField').dom.value = doc.getElementById('DialogBoxField').value;
}
},
validateFunction: function (doc) {
if (doc.getElementById('DialogBoxField').value == "") {
Ext.MessageBox.alert('Information', 'Field has to be filled in');
return false;
}
return true;
}
});

RWaters
9 Jan 2008, 6:49 AM
Thanks for the examples folks. Just wanted to mention that the 2.0 conversion is coming along nicely and that the new Window component should be a lot easier to use than the 1.x DialogBox. We'll have to put it on the list to at least make an example since it seems that several people are interested in it.

ssmillie
10 Jan 2008, 4:22 AM
Is the Ext.ND conversion to Ext 2.0 conversion still going to have some beta type release ready in time for LotusSphere?


Oh, and thanks to you and the others for the great work on Ext.ND!! Looking forward to the next release!!

RWaters
10 Jan 2008, 9:27 AM
We're cutting it close, but I expect we'll have a release for Lotusphere.

intertchelo
13 Feb 2009, 6:15 AM
Hi Episode1 ..


do you have a screenshot for show this dialog in execution ?

I really try to use your code but unsuccessfully...

Could you please post the entire code as example ?

thank you so much...

jratcliff
13 Feb 2009, 8:28 AM
Hi Episode1 ..


do you have a screenshot for show this dialog in execution ?

I really try to use your code but unsuccessfully...

Could you please post the entire code as example ?

thank you so much...

If you are using Beta 1r1 then that code won't work. That code was based on Ext 1.x and Ext.nd Alpha 1.x. Beta 1.x+ is using Ext 2.x. If you take a look at the source code in the Beta 1r1 example and look at the UIWorkspace.js file you can see the new code that uses Ext.Window.