Submitting a form using Sencha Touch

I want to build a simple form with Sencha Touch, and attach a submit handler to it. Either I'm a n00b, or this is surprisingly hard to do. Here's what I want:

• Attach an onSubmit handler to the form, not a onClick handler to the submit button
• Cancel form submission when the form is submitted.

The problem is that regular Sencha Touch buttons are not buttons at all - they are just a bunch of divs and spans. Hence, tapping on the submit button doesn't fire the native form submit. As a result, a handler will need to be attached to the "button" to fire 开发者_JS百科a submit on the form, and then capture the submit of the form to do what I want. This is doable, but doesn't sound elegant. Is there a better way of doing this?

The second problem is that of event canceling. How do I get a handle of the submit event object so that I can call preventDefault on it? Is there any other way to do this in the Sencha Touch world?

If you want to perform a stand submit action on a form, you need to set the "standardSubmit" config property to true, which will force a standard submit when the form is posted.

And yes, you must attach an event handler to a button but it' very easy. All you have to do is setup the button like so:

{ xtype: 'button', text: 'Next', handler: this.tapHandler //<= common tapHandler for the page }

Then setup a handler like so:

// Toolbar button handler function
tapHandler: function (button, event) {
        switch (button.text) 
        {
           case "Submit":
               myForm.submit({...config object see API...})
               // to cancel event simply return false
               return false;
               break;

        }
}

You have got an option "submitOnAction: true,", which lets you submit when user clicks button Ok/Go on the virtual keyboard on mobile device (works fine for iPhone/iPad).

app.views.newItemForm = Ext.extend(Ext.form.FormPanel, {
 submitOnAction: true,
 activeItem: 1, 
...