Sencha Touch 2 QuickStart Series (iii)--component tables (forms)

This article has been added to Sencha Touch 2 QuickStart Series index:http://blog.csdn.net/ardy_c/article/details/7544470

Reprint please indicate the source: http://blog.csdn.net/ardy_c/article/details/7497330

In applications, there are many times when you need to interact with users. forms (Forms) this thing gives us a good interface. I'm sure you are familiar with the traditional HTML form. The form in Sencha Touch 2 doesn't differ much from the traditional HTML form. Also because Sencha Touch 2 is based on HTML5, its form encapsulates HTML5 's form functionality, provides some alternative validation and data submissions, and provides a beautiful look. This section, we will show you how to use the form.

Create a form (forms)

It's easy to create a form, so let's start with the code:

var formpanel = ext.create (' Ext.form.Panel ', {    fullscreen:true,     items: [{    &NBS P   xtype: ' fieldset '         items: [            {    & nbsp           xtype: ' TextField ',                 name: ' Nam E ',                 Label: ' Name '     '         &NB Sp           {                xtype: ' Emailfield ',   & nbsp             name: ' Email ',                 Label: ' Email '            },             {      &NBSP ;         xtype: ' Passwordfield ',      ,           Name: ' Passwo Rd,                 Label: ' Password '             &N Bsp


      ]    }]};

The class corresponding to the form is Ext.form.Panel, which inherits directly from Ext.panel. Create an instance of the class that is equivalent to the existence of the container, and then add a variety of components internally to input information (that is, add various input tags, textarea tags, and so on in the form tag) inside the HTML.

In the code above, as a formpanel child element is a component named FieldSet. Its role is to put the various components used for input packaging to make them more neat and beautiful. You can even set the title property, which automatically adds the value of the title property to the top of the form as the title of the form, giving the user more immediate recognition of the purpose of the form. In the fieldset component, we added three components for input--textfield, Emailfield, and Passwordfield. Where the email is HTML5 new input label type for email type, the other two believe that I do not have to say in detail here, you will understand. This creates the simplest form, and you can perform the complete code below to preview the effect that the code produces. The complete code is as follows:

Ext.application ({
    name: ' Sample ',

    launch:function () {
        var formpanel = ext.create (' Ext.form.Panel ', {
            fullscreen:true,
        
            items: [{
                xtype: ' fieldset ',
                title: ' My A-form ',
                items: [
                    {
                        xtype: ' TextField ',
                        name: ' Name ',
                        Label: ' Name '
                    },
                    {
                        xtype: ' Emailfield ',
                        name: ' Email ',
                        Label: ' Email '
                    },
                    {
                        xtype: ' Passwordfield ',
                        name: ' Password ',
                        label: ' Password '}}
            ]
        };

        Ext.Viewport.add (Formpanel);
    }
);

Refine your form

In this way, we succeeded in creating a form. is not very simple. It's so simple. Of course, this is not yet a complete form. Next, let's refine this form together.

Ext.application ({name: ' Sample ', Launch:function () {var formpanel = ext.create (' Ext.form.Panel ', {
                    Fullscreen:true, items: [{xtype: ' fieldset ', items: [
                        {xtype: ' TextField ', Name: ' Name ',
                        Label: ' Name '}, {xtype: ' Emailfield ',
                        Name: ' Email ', Label: ' Email '}, {
                    Xtype: ' Passwordfield ', Name: ' Password ', Label: ' Password '
        
        }
                ]
            }]
        });
            Formpanel.add ({xtype: ' toolbar ', docked: ' Bottom ', layout: {pack: ' Center '}, Items: [{xtype: ' butTon ', Text: ' Set Data ', handler:function () {formpanel.se
                            Tvalues ({name: ' Ed ', email: ' Ed@sencha.com ',
                    Password: ' Secret '}}}, {
                        Xtype: ' button ', text: ' Get Data ', handler:function () {
                    Ext.Msg.alert (' Form Values ', Json.stringify (formpanel.getvalues (), NULL, 2));
                    }, {xtype: ' button ', text: ' Clear Data ',
                    Handler:function () {formpanel.reset ();
                    }, {xtype: ' button ', text: ' Submit ', Handler:function () {FORMPAnel.submit ({url: ' testsubmit.php ', Method: ' POST ',
                            Success:function () {alert (' form submitted successfully! ');
                    }
                        });
    }
                }
            ]
        });
 }
});

The above code is based on the original example, the Formpanel.add method appends a subassembly, the type is toolbar. As the name suggests, adding toolbar is just adding a sidebar for this formpanel. Where the docked property refers to where the docked dock (top top, bottom bottom, left left-hand, right four options). The above choice dock in bottom, is the bottom. The layout attribute here is passed into a data object in which the pack is defined as the alignment of the child elements within the container (left-aligned start, center center, right-aligned end). In the appended toolbar, we added four button components as child elements of the toolbar.

First button, set the Text property to set Data, which is used to set the text content displayed on the button. The handler property is the method used to set the response button click event. The solution here is to fill in some fixed information for the form. Where the Formpanel.setvalue method is used to set the values of the items in the form, the incoming parameter is a data object, and each property name in the data object must correspond to the Name property of each item in the form, otherwise the set value fails.

The second button, in response to the Click event, is to display the values of the items in the form in alert mode. Ext.Msg.alert is a static method that pops up a message box, the first argument is the title text of the box, and the second parameter is the body of the message that needs to be displayed. The Formpanel.getvalues method is to get the value of all the items inside the Formpanel.

The third button, which is simple, straightforward, resets the form and type=reset the same effect as the HTML.

A fourth button that submits the form. Formpanel.submit () method to implement the operation of the form, we passed in a data object, which set the form to submit the address (URL), the method of submission (method), response to the success of the processing methods (success). One thing to note is that the Submit response page needs to return the JSON of {"Success": true} before it is considered a commit success.

A complete form came out, let's try and see how it works. Of course, you need to prepare a response page that handles submissions.