View Full Version : Struggling with Documentation

30 Apr 2007, 8:17 PM

Firstly I do not want this to seem like a rant, I understand that Ext-YUI is the result of millions of hours of blood sweat and tears and is the next best thing since sliced bread.

But after spending the last two nights trying to get a simple form to work I have to ask myself if the entended target developer for using EXT is the uber js/OOP guru. I consider myself an average js developer but admit I lack OOP experience. I have utilized a few different js API's / Frameworks in my day mostly for form validation and the like.

One of the benefits to the EXT framework is it's documentation but that appears to assume one already has a solid grasp on EXT and serves as a reference. I normally like to find answers myself and use posts to a forum as a last resort. I really want to use EXT for a site I am working on but I may have to rely on frameworks I already know because I need this project done in a timely fashion and cannot afford to spend time trying to dig up answers on how to use EXT.

I am just trying to see if I can add some functionality to one of the examples that come with the documentation. The forms example forms.html & forms.js specifally. What I was trying to do was add a button to the form and have it call a function when it was clicked. The function would basically validate the form fields.

I ask that you look at this objectively and that you might find some areas for improvement or you might find that I missed the boat completely and I am at fault. Approach the above mentioned requirement as if you are using EXT for the first time and rely mostly on whats available in the documentation.

In my requirement I wanted to make the form validate it's fields when it was submitted. The form fields will validate themselves when you leave them or onblur but if the user never clicks into the required field then that event never happens.

so I added a button to the form like so...

<input type="button" name="btnSubmit" value="Submit" onClick="doSubmit()">

then in the forms.js I just wanted to call the markInvalid method on a field in the form and I keep getting an object does not support that method. Here is my code that I added to the forms.js example.

//none of these statements work
Ext.form.markInvalid({id:'markup-date', msg:'The message'});
Ext.form.Form.markInvalid({id:'markup-date', msg:'The message'});

so my question is, how do I call the markInvalid method on the form? Using just the example code and the documentation and having never use EXT before what did I miss that would have helped me here?


30 Apr 2007, 9:11 PM
You are calling the methods as if they are static, which is not correct. Instead, you need to call them on an actual form instance.

Instead of:

Ext.Form.markInvalid({id:'markup-date', msg:'The message'});

You need something like:

var myForm = new Ext.Form();
// add fields and such here, including 'markup-date'...

myForm.markInvalid({id:'markup-date', msg:'The message'});

One other thing, if you re-read the API doc for BasicForm.markInvalid, the parameter signature is:

Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}

You need to either add the square brakets to use array syntax:

myForm.markInvalid([{id:'markup-date', msg:'The message'}]);

or use the correct object literal syntax:

myForm.markInvalid({'markup-date' : 'The message'});

The form stuff is extremely new (with 1.0 that just came out 2 weeks ago) so the examples and tutorials covering them are somewhat light at the moment. The best thing to do is try things out and post here when you need help as you did. Posting more if your actual code will be helpful though, as there may be other things going on that you don't realize, and no one here will know without seeing what you're doing :)

One other thing that will help you get started is to use Firefox + Firebug for development -- I would bet that your current code is probably throwing an error message that would tell you what the problem is. Firebug error messages are also helpful when describing your issue to others.

30 Apr 2007, 11:48 PM
It's also very important that you understand at least the basics of objects in Javascript. As with any language, if you're implementing something reasonably well sized, you'll need the foundation of the language to produce decent results.

Some of us are working on helping the Ext team get some additional tutorials and examples put together to teach and demonstrate the functionality. I just submitted a pretty extensive tutorial on the layout manager and its functionality (part 1) which will be published sometime today. That will be a multi-part tutorial on layouts and how to accomplish things with them.

I understand the frustration you're having trying to implement an application based on basic examples and APIs. What's definitely missing are some of the more esoteric parts of things, particularly in Javascript. But like I said it's really important that you understand the language constructs so you have a better understanding of how things are getting assembled.

It's not a simple topic, particularly when you have to deal with the language, html, the dom, and style sheets all at the same time. It gets complicated pretty quickly.

1 May 2007, 7:12 AM
Thanks for your help, I understand about simple objects but lack when it comes to the OOP concepts in the framework.

Brian, I had already considered using your method...

var myForm = new Ext.Form();

But I am trying to work with a form that already exists in the markup, I thought your code actually creates the form dynamically. Is that the case?

The code I am working with is in the forms examples that come with the latest build. I just added the two snippets I posted previously.