Sencha Inc. | HTML5 Apps

Working with Forms

Published Jul 22, 2011 | Drew Neil | Screencast | Medium
Last Updated Jul 22, 2011

This Screencast is most relevant to Sencha Touch, 1.x.

Duration: 17:54

In this screencast, we build a simple application that lets us manage users. We use the model, view, controller (MVC) pattern, learning how to capture the data entered into a form to create new records and update existing records. We’ll also learn how to use the model validations from Sencha Touch’s data package to report errors in the form.
Share this post:
Leave a reply

Written by Drew Neil

16 Comments

Evagoras Charalambous

3 years ago

Once again great work.

Do you have any examples on how to best use caching on the client, while still updating live? Ideally, when creating forms, I want to have AJAX live store proxies so that updates are saved on the server, but I also want to keep a localstorage to make things faster. Are there any examples on how to best accomplish something like this? And if there are none, perhaps this is an idea for a future screencast?
grin

Pjotr

3 years ago

Thanks, great work!

Zsolt

3 years ago

Can we have the source code for this tutorial?

Drew Neil

3 years ago

@Zsolt take a look at the sidebar on this page. It includes a handful of links that are relavent to this article, including a link to the source code on github: https://github.com/senchalearn/Forms-demo

Zsolt

3 years ago

Oh that’s great, thanks a lot! Sencha Touch and these screencasts are more than perfect so congrats!
I like the speed of these tutorial too ....

Pakman

3 years ago

Does this actually work? In the documentation (and in the the source code) for Ext.data.Store I don’t see any create method.  What does this.store.create(params.data) actually work?

Francis Flores

3 years ago

Drew, I really like the screencast but where do you suggest I start to learn more about building the UI? Any links? Thanks!

Drew Neil

3 years ago

@Pakman you’re right: the create() method on a store doesn’t seem to be documented at the moment. But trust me, it works! You can try it out for yourself in the console. Go to the live demo here: http://sencha-forms.heroku.com/

Open up the web inspector, and switch to the console tab. Then type this: `App.stores.users.create({name: ‘Bilbo Baggins’, email: ‘bilbo@theshire.com’})`. You should see the listview update instantaneously.

Pedro Leite

3 years ago

Great job as usual…i learned much of what i know about Sencha Touch from ur tutorials!
Keep them coming…!!

MeneerDuck

3 years ago

I’m wondering. Where exactly can I find the documentation about how to use the MVC model within Sencha Touch? I just have to learn from the given examples like this one, or is there a description? I can’t find it. Thanks mates.

Mac

3 years ago

Like MeneerDuck, i also would like a tutorial or documentation on the Sencha Touch MVC model and features.

Umair

3 years ago

Would you mind recording similar video for proxy type ajax with xml as data type? Assume it must support complete CRUD like this. Great job with this one!

Brad Midgley

3 years ago

Could I specify a human-readable version of the field name to be displayed in the validation error? I’d like to use the field first_name but in the validation error, it should come out as First name etc.

Rafael Carvalho

3 years ago

I know it is a silly question, but im using your code as parameter to build my own App, and im using the class Ext.extend(Ext.form.FormPanel… to build a form but i just can´t click anything inside the screen. Only the textfield is usable. My buttons or my ClearIcons are not working at all, they are just like a picture or a normal field.

Can you help me, plese?

Thank you in advance

Rob Backus

3 years ago

I am trying to place this example in a tabPanel. I converted viewport ext.Panel to ext.TabPanel and it works fine however when I click on a list item and it navigates to the form, it adds an invisible icon to the tabbar. Could you tell me how to modify this tutorial so that it does not add the invisible icon to the tabbar? thanks!

Vinicius

3 years ago

Hi there!! Great work!! I’ve been getting some problems running that application in UIWebView on Device(iPhone 4), when I’ll validade the form, the WebView on Device doesn’t work fine like simulator or on browser. The error fields doesn’t show unless I touch the field. Have you ever got this problem?!!? How can I fix it?!? It seems that UIWebView doesn’t update, refresh or scroll properly. Thx in advance!!!

Leave a comment:

Commenting is not available in this channel entry.