PDA

View Full Version : Using Ext.forms field widgets with existing dom elements



timb
23 Feb 2007, 1:43 PM
Since this is my first post, I have to say thank you to Jack and everyone who has contributed to this fantastic library!

Now on to my question. Is it possible to use the Ext.forms field widgets by "attaching" them to existing dom elements rather than having them appended to a container at runtime? I checked the source code and it doesn't look like it's possible at this point. It's close, though. If I pass the input element instead of the config object when I'm creating the widget, it will remove the old dom element, but it will append the updated element to the end of the container instead of doing a replace.

If it's possible to do this, can you please point me in the right direction. If not, I would like to request this feature. :)

Thanks!
Tim

jack.slocum
23 Feb 2007, 2:29 PM
It should work, but I am experiencing the same problem. I am investigating now.

timb
28 Feb 2007, 12:35 PM
I quickly tested this in 1.0 Alpha 2 Rev 6 and it appears to be working now.

Regards,
Tim

philiphachey
23 Mar 2007, 8:16 AM
It's not working in Alpha3, unless there's something wrong with my code....



Ext.onReady(function()
{
var elt = Ext.get('FollUp_Dt');
elt.format = "Y/m/d";
elt.regex = /^2\d{3}\/((0?[1-9])|(1[0-2]))\/((0?[1-9])|([1-2][0-9])|(3[0-1]))$/;
var d = new Ext.form.DateField(elt);
// this works...
d.el.dom.size = 11;
// but this doesn't
d.on("blur", function(){alert('test');});
})


The existing field's size gets changed, but nothing else about the DateField is working: no menu, no on("blur"..), no validation.

If you're wondering about the regex, that's just so that the user can't enter dates like 2007/14/44.

timb
23 Mar 2007, 8:29 AM
Hi philiphachey,

A new function called applyTo has been added. You will need to use this. Here is an example:

var date = new Ext.form.DateField({
allowBlank:false
});

date.applyTo('markup-date');
Jack has updated his form example with this new code. Please see the following page:
http://yui-ext.com/deploy/ext-1.0-alpha3/examples/form/forms.html

Regards,
Tim

philiphachey
23 Mar 2007, 8:35 AM
Perfect! Thanks a lot!

mmcmahon
23 Mar 2007, 8:50 AM
Jack has updated his form example with this new code. Please see the following page:
http://yui-ext.com/deploy/ext-1.0-alpha3/examples/form/forms.html


I was checking out the example and I read the disclaimer, but the shrinking and expanding that happens when you alternate between the data field and the combo-box, has me curious if that's a problem with the forms or the controls. Any guesses for that one?

timb
23 Mar 2007, 9:01 AM
I can't seem to reproduce that problem using FF 2.0.0.3 or IE 7.

mmcmahon
23 Mar 2007, 10:04 AM
Here's a screen capture of the behaviour. Sorry for the file size but the flash convert didn't work out well.

http://mm0101.googlepages.com/extformsdemo

yogurtearl
23 Mar 2007, 2:40 PM
Some suggestions for Ext.form (if not already implemented)

1. Add autoform capability. eg have any input field with class="x-date-field" be a date field
2. Add custom autoform types e.g.
Ext.addFormClass({class: "x-single-char",
regex: /^.$/,
msg: "must be a single char" });

Any field with class="x-single-char" would have those properties
3. Disable the submit button if there are any invalid fields with preventSubmit = true