官方文檔翻譯 在Sencha Touch 2中使用表單
創建一個表單
表單面板提供一套表單字段和訪問/存儲數據的簡單方式。通常表單面板只包含你要顯示的一套字段，在條目(item)配置中的排序如下：
- Ext.create('Ext.form.Panel', {
- fullscreen: true,
- items: [
- {
- xtype: 'textfield',
- name : 'name',
- label: 'Name'
- },
- {
- xtype: 'emailfield',
- name : 'email',
- label: 'Email'
- },
- {
- xtype: 'passwordfield',
- name : 'password',
- label: 'Password'
- }
- ]
- });
這里我們只是創建了一個簡單表單面板，它可以用做注冊表單注冊到你的服務。我們為用戶名字增加個普通文本字段，一個電子郵件字段，***一個密碼字段。在每個case里我們在字段里提供了一個名字配置，這樣稍后我們就可以在表單加載或存儲數據時標識它。
加載數據
使用上面我們創建的表單，我們可以用幾種不同的方法把數據加載進去，最簡單的方法就是使用setValues：
- form.setValues({
- name: 'Ed',
- email: 'ed@sencha.com',
- password: 'secret'
- });
加載模型實例到表單中也很容易—假如我們有一個用戶模型，要把特定的實例加進我們的表單。
- Ext.define('MyApp.model.User', {
- fields: ['name', 'email', 'password']
- });
- var ed = Ext.create('MyApp.model.User', {
- name: 'Ed',
- email: 'ed@sencha.com',
- password: 'secret'
- });
- form.setRecord(ed);
檢索表單數據
getValues方法可以很方便的從表單面板里取數據：
- var values = form.getValues();
- //values now looks like this:
- {
- name: 'Ed',
- email: 'ed@sencha.com',
- password: 'secret'
- }
可以在單獨字段上偵聽變動事件，從而取得用戶變動的及時通知。這里我們擴展上面的用戶模型，只要任一字段改變就更新模型。
- var form = Ext.create('Ext.form.Panel', {
- listeners: {
- '> field': {
- change: function(field, newValue, oldValue) {
- ed.set(field.getName(), newValue);
- }
- }
- },
- items: //as before
- });
上面使用了Touch2.0的新功能—可以指定任何容器的子組件上的監聽器。在這個case中，我們把監聽器綁定到每個表單字段的變動事件，這里的表單字段是表單面板的一個直接子部分。監聽器取得觸發事件的字段的名字，用新值更新模型實例。例如，改變表單的電子郵件字段將會更新模型的電子郵件字段。
提交表單
有幾個提交表單數據的方法。在上面的例子里有一個更新模型實例，可選用模型的save方法把改變傳回服務器，而不用傳統的表單提交。我們也可以用submit方法發送一個普通瀏覽器表單提交。
- form.submit({
- url: 'url/to/submit/to',
- method: 'POST',
- success: function() {
- alert('form submitted successfully!');
- }
- });
在這個case里我們提供url來提交表單到內置的提交調用—你可以在創建表單的時候設置url配置項。我們可以指定其他參數(參照全列表submit)，包括針對成功/失敗的回調函數，他們是否被調用取決于表單提交是否成功。在數據存儲到服務器后，這些回調函數通常用來在你的應用中采取些動作。
查看地址：http://www.html5mobi.com/document/st2/docs/index.html
原文地址：http://www.html5mobi.com/document/st2/docs/index.html#!/guide/forms
