04 March 2011 ~ 39 Comments

Ext Designer tutorial – the basics: building forms

Earlier I have written two posts covering Ext Designer:

This post is meant to cover the basics of building a form using Ext Designer and customizing the generated files so you can be up running with a shiny new form in minutes!

There is also a screencast of this tutorial, Ext Designer screencast: building a form, available.

Forms in Ext Designer

First of all we need to make some things clear. If you are going to implement any kind of events in Ext Designer, that is – make anything work, you need to do some coding. You also need to get to know the Ext Js api docs. You won’t be able to make a working form using only the Ext Designer gui. But, that does not mean it’s difficult. Let’s continue!

Building the interface in Ext Designer

Make something similar to this:

Ext Designer tutorial, a basic form step 1

What I have done here is:

  1. Add a FormPanel
    • Set the id to “myFormPanel”
    • Set the url to “formhandler.php” (this is the script that will handle the form post)
  2. Add two TextFields: Name and Email
    • Set the labels you want, for example “Name” and “Email” as I have in my example.
    • Set name for each field. I have used “name” and “email”.
  3. Add a DateField
    • Set the label
    • Set the name to “dob”, for example.
  4. Add a button
    • Set the text to “Post form”
    • Set the id to “postButton”

Now, it’s time to export our project and test it. Remember that by default the exported files are stored in the same folder as your Ext Designer project file (.xds).

Your example should work like mine, you can test it here: http://aboutfrontend.com/examples/extdesginer-basic-tutorial/step1/xds_index.html

As you will see, not very fun. We need to do some simple coding to get things working.

Configuring the javascript in your favorite IDE

(My favorite IDE is Zend Eclipse PDT btw!)

Open up the file MyForm.js. It should look like this:

MyForm = Ext.extend(MyFormUi, {
    initComponent: function() {
        MyForm.superclass.initComponent.call(this);
    }
});

What we’ll do now is to attach a click event to the button. The click event will call submit() method in the FormPanel. Let’s try:

MyForm = Ext.extend(MyFormUi, {
    initComponent: function() {
        MyForm.superclass.initComponent.call(this);
        this.findById("postButton").on("click", function(button, event) {
        	Ext.getCmp("myFormPanel").getForm().submit();
        });
    }
});

Let’s see how this looks now. You can try my example here: http://aboutfrontend.com/examples/extdesginer-basic-tutorial/step2/xds_index.html

If you open up firebug before you click the submit button you will see the following:

ext-designer-tutorial-basic-form-running-in-browser

As you might remember from when we setup the project in Ext Designer we specified the url, “formhandler.php” in the FormPanel.We have yet not made that file, so as you notice in firebug in the screenshot above we get a 404 when hitting the “Post form” button.

Let’s do a few more things to the MyForm.js file. According to the documentation of the BasicForm, which is extended by the FormPanel, the submit method can take an option object:

MyForm = Ext.extend(MyFormUi, {
    initComponent: function() {
        MyForm.superclass.initComponent.call(this);
        this.findById("postButton").on("click", function(button, event) {
        	Ext.getCmp("myFormPanel").getForm().submit({
        		success: function(form, action) {
        	       Ext.Msg.alert('Success', action.result.msg);
        	    },
        	    failure: function(form, action) {
        	        switch (action.failureType) {
        	            case Ext.form.Action.CLIENT_INVALID:
        	                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
        	                break;
        	            case Ext.form.Action.CONNECT_FAILURE:
        	                Ext.Msg.alert('Failure', 'Ajax communication failed');
        	                break;
        	            case Ext.form.Action.SERVER_INVALID:
        	               Ext.Msg.alert('Failure', action.result.msg);
        	       }
        	    }
        	});
        });
    }
});

If you had a look at the documentation for the submit method in BasicForm you will notice that the above is pretty much copy&paste. Let’s try to run this now. You can test my example here: http://aboutfrontend.com/examples/extdesginer-basic-tutorial/step3/xds_index.html

You like it? Nice error messages. We now need to make the script formhandler.php.

    // Validation
    $error = array();
    if(!isset($_POST['name']) || strlen($_POST['name']) == 0)   $error[] = "name";
    if(!isset($_POST['email']) || strlen($_POST['email']) == 0) $error[] = "email";
    if(!isset($_POST['dob']) || strlen($_POST['dob']) == 0)     $error[] = "date of birth";
    if(sizeOf($error))  {
    	// Do error handling here
    	echo '{
		    "success":false,
		    "msg":"Error validating submited data, please specify: '.implode(",", $error).'"
		}';
    } else {
    	// Do serverside form handling here
    	echo '{
		    "success":true,
		    "msg":"Form posted successfully"
		}';
    }

Now you can try to run the finished script here: http://aboutfrontend.com/examples/extdesginer-basic-tutorial/step4/xds_index.html

I hope it was helpful. Btw, follow me on twitter!

Further reading

Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools
Beginning PHP RIA Using Extjs
Zend Studio for Eclipse Developer's Guide

39 Responses to “Ext Designer tutorial – the basics: building forms”

  1. lostuser 29 March 2011 at 07:57 Permalink

    Hey, ty for helping…
    I made a tutorial and read alot, now im working with Designer+SQL =D
    Pretty cool
    But yet working on learning more.
    I want to access from a Viewport.js into component inside, just cant get it with the id… even with the entire id path… but lets keep working =D…
    Ty

  2. Nils-Fredrik 14 April 2011 at 08:41 Permalink

    @Lostuser: How do you try to access the components inside? Using this.findById()?

  3. Kleuber 7 June 2011 at 22:55 Permalink

    I have completed all the steps, but I’m still receiving the message “Ajax communication failed” always.
    Is there something that I’ve missed?

  4. stew 5 December 2011 at 13:21 Permalink

    I take it this is ext3? findById and getCmp…?

  5. Kenneth Jilek 29 May 2013 at 06:50 Permalink

    Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is magnificent, as well as the content!. Thanks For Your article about Ext Designer tutorial & .

  6. Jacinto Corning 7 June 2013 at 08:52 Permalink

    Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is great, let alone the content!. Thanks For Your article about Ext Designer tutorial & .

  7. Niesha Fairfield 15 June 2013 at 09:11 Permalink

    Wow, marvelous blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is magnificent, as well as the content!. Thanks For Your article about Ext Designer tutorial & .

  8. Tiny Sarvey 20 June 2013 at 20:12 Permalink

    Wow, marvelous blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is wonderful, as well as the content!. Thanks For Your article about Ext Designer tutorial & .

  9. Carina Layer 21 June 2013 at 11:36 Permalink

    Wow, wonderful blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is great, as well as the content!. Thanks For Your article about Ext Designer tutorial & .

  10. Oscar Papp 30 June 2013 at 09:54 Permalink

    Wow, incredible blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is fantastic, let alone the content!. Thanks For Your article about Ext Designer tutorial & .

  11. Heike Batiz 29 July 2013 at 05:57 Permalink

    Wow, awesome blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is great, as well as the content!. Thanks For Your article about Ext Designer tutorial & .

  12. Paulene Fitzherbert 22 November 2013 at 04:09 Permalink

    Wow, wonderful blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is excellent, as well as the content!. Thanks For Your article about Ext Designer tutorial & .

  13. Aaron Kiphart 24 November 2013 at 04:24 Permalink

    Wow, incredible blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is magnificent, let alone the content!. Thanks For Your article about Ext Designer tutorial & .

  14. Many Grenon 27 November 2013 at 04:58 Permalink

    Wow, wonderful blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is great, let alone the content!. Thanks For Your article about Ext Designer tutorial & .

  15. OliveVAKYpei 15 December 2014 at 23:11 Permalink

    http://icargame.com

  16. SalIMHUmppnnzkd 24 December 2014 at 06:27 Permalink

    https://bitly.com/bundles/hvacbaltimore/1

  17. phoenix digital printing 4 February 2016 at 20:11 Permalink

    The first time I becawme aware of phoenix digital printing printing on material was five years ago with Spoonflower prints.

  18. Remodeling Company Kansas City 5 February 2016 at 03:15 Permalink

    It is also presents among the simplest and also
    most cost effective options on the price ech square foot basis.

    Feel free to visiit myy site – Remodeling Company Kansas City

  19. gemme gratuit clash of clan 15 February 2016 at 18:56 Permalink

    Study after study confirm they inhibit social and electric motor
    function growth, lead to obesity plus lethargy, and decrease motivation.

  20. coffee blender 23 February 2016 at 16:55 Permalink

    Undoubtedly, this equipment won’t crank out lots of different grinds and end up
    pounds of ground coffee blender in a
    week.

  21. Phillip 26 March 2016 at 19:52 Permalink

    Google continuously updates, readjusts as well as modifies their internet search engine algorithms– specifically in the means they deal with older Search Engine Optimization methods.” Several companies have actually seen their search engine rankings drop as well as their sites punished,” because a previous
    Search Engine Optimization firm they employed had
    employed black hat” tactics which are currently recognized by Google.

    My weblog pittsburgh seo consultant (Phillip)

  22. Roi (ROI) is crucial with not just Kitchen Remodeling (https://foursquare.com/v/galaxie/5729b213498ef7a9836195ca) remodels, but any kind of remodel throughout the house.

  23. Sex toys 9 June 2016 at 05:46 Permalink

    In the majority of markets, the percent shaare of traditional playthings as well ass online games that target grownups (populace matured
    20 aand over) stays below 10%.

    Here is mmy blog: Sex toys

  24. pilzmitin.tumblr.com 12 June 2016 at 01:58 Permalink

    If there are any scabs, scaly patches, bald spots, rashes or lesions, a veterinarian should be notified.
    If you live in an area where ticks are prevalent (your vet will advise), then check his coat for
    ticks and use a tick powder regularly. Most nail polish removers are alcohol based, so it is especially important to moisturize after
    removing nail polish,.

  25. visual.ly 15 June 2016 at 18:11 Permalink

    Getting the right timing even from the start can help
    you speed up in learning how to strum the guitar in timing.
    Music has always been one ways to express the emotions and feelings
    that we could not let out on speaking alone.
    It needs the consumer to ‘pump’ or ‘squeeze’ the instrument as they are playing the accordion, with each
    hands controlling either side of the accordion.

  26. best steroids for strength 16 June 2016 at 01:05 Permalink

    The laser can reshape either the lens or the cornea of the patient,
    depending on the type of astigmatism. However, there exist some
    dangerous steroids as well that can cause serious side effects, but it is up to you whether you get them
    or not. o bacon, three pieces of applewood smoked bacon and housemade bacon mayo.

  27. Cindi 16 June 2016 at 05:13 Permalink

    You can by using by using the right colors and lighting design, create a
    posh and cozy bathroom retreat. Placement: Corner, middle, against a side wall,
    stand-alone, as a bathroom within a bathroom. Teaching the basics of
    hygiene, diet and nutrition, and safety covers three key areas of important knowledge for your child.

  28. This is the adventurous part of your safari when your car rides
    and glides up and down the high and low golden sand dunes.
    our kerala tour package covers kerala holiday package, cochin, munnar, thekkady
    package. Many people around the world are now
    staying and working at Dubai.

  29. Virgilio 29 June 2016 at 23:29 Permalink

    I’m sure that some of the low handicappers would have trouble with my
    review and will surely dispute my findings. I normally have GHIN of around
    12 and a swing speed right at 100 MPH. First, the product is to
    be used as a “still” ball trainer.

  30. Data plans are becoming more affordable which means people are more likely to use their mobiles today than they were a few years
    ago. If you’re on a tight budget, stick to the free ones.
    accident help’ as a prominent feature on your mobile site could be
    helpful as the phone may be the first place people go
    after an accident.

  31. lasvegas.newssides.com 30 June 2016 at 01:56 Permalink

    Arranging a Sydney harbour cruise party will not
    even pinch your pocket and there are many options that give you the perfect
    party options even on a low budget. The accurate diameter of the boat
    prop will be dependent on the boat length, the mass of the
    boat when it is partially loaded, and the utmost acceptable rev of the steam engine and the arrangement or dislocation of water due to
    boat movement. There are many online companies that can be looked for online providing affordable and sophisticated new
    and used boats in different sizes and dimensions.

  32. Meri 21 July 2016 at 15:02 Permalink

    o Workstation side – workstation is written in Great
    Plains Dexterity and has Dynamics. For people who wish to deal only in cash, the money order is the safest option. So you could have
    a charge per hour rather than a cost per unit, if you’re in the service sector rather
    than in production.

  33. Gia 28 July 2016 at 07:05 Permalink

    With the amazing work being done in the field of Augmentative and Alternative Communication, the
    sky is the limit for kids like Aaron. Baby walkers, or sometimes also called a walking ring
    date back as far as 1870. Chances are therefore good that a baby who spends too
    little time crawling won’t properly master or take longer to master these skills.

  34. baby walkers 28 July 2016 at 07:09 Permalink

    There are some precautions to be taken while purchasing a
    baby walker; the baby walker should always be lightweight
    and easy to use. The most important safety method is always going to be your supervision.
    It can be attached with toys to enhance the fun of learning
    to walk.

  35. Napoleon 28 July 2016 at 10:10 Permalink

    The website, offers coupons for free samples of baby formula,
    diapers, and other items if you join their free club. If you
    have or are going to have triplets, you may be interested to know The
    First Years gives free baby items to parents of multiple births.
    Scout for potential investments and acquisition targets, with detailed
    insight into the companies’ strategic, financial and operational performance.

  36. www.showmelocal.com 28 July 2016 at 12:33 Permalink

    Being unable to repay a payday loan can carry serious consequences.

    There are so many different investigations over numerous categories within the lending industry
    all focused on snuffing out lenders who practice short-term loans.
    You may not have the urge to apply for them every day, but when the going gets
    tough, is it programmed in you to automatically apply for a short-term loan.

  37. Vilma 28 July 2016 at 20:08 Permalink

    If you’d like, you can combine these two techniques by purchasing a
    large looseleaf and keeping your spiral notebooks inside of it.
    My argument is that if the government does have a role it should be effective and cost
    efficient. Online shops are another great idea to purchase cheap college
    textbook.

  38. Ernestina 3 August 2016 at 02:36 Permalink

    The body can also cause stress by producing stress hormones, like epinephrine and cortisol in huge amounts.
    Many people fail to lose weight, despite their long and hard
    efforts in the gym. Jogging and swimming regularly, he could lose 159kg.


Leave a Reply