官方文檔翻譯 在Sencha Touch 2中使用表單
創(chuàng)建一個(gè)表單
表單面板提供一套表單字段和訪問/存儲(chǔ)數(shù)據(jù)的簡單方式。通常表單面板只包含你要顯示的一套字段，在條目(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'
- }
- ]
- });
這里我們只是創(chuàng)建了一個(gè)簡單表單面板，它可以用做注冊表單注冊到你的服務(wù)。我們?yōu)橛脩裘衷黾觽€(gè)普通文本字段，一個(gè)電子郵件字段，***一個(gè)密碼字段。在每個(gè)case里我們在字段里提供了一個(gè)名字配置，這樣稍后我們就可以在表單加載或存儲(chǔ)數(shù)據(jù)時(shí)標(biāo)識(shí)它。
加載數(shù)據(jù)
使用上面我們創(chuàng)建的表單，我們可以用幾種不同的方法把數(shù)據(jù)加載進(jìn)去，最簡單的方法就是使用setValues：
- form.setValues({
- name: 'Ed',
- email: 'ed@sencha.com',
- password: 'secret'
- });
加載模型實(shí)例到表單中也很容易—假如我們有一個(gè)用戶模型，要把特定的實(shí)例加進(jìn)我們的表單。
- 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);
檢索表單數(shù)據(jù)
getValues方法可以很方便的從表單面板里取數(shù)據(jù)：
- var values = form.getValues();
- //values now looks like this:
- {
- name: 'Ed',
- email: 'ed@sencha.com',
- password: 'secret'
- }
可以在單獨(dú)字段上偵聽變動(dòng)事件，從而取得用戶變動(dòng)的及時(shí)通知。這里我們擴(kuò)展上面的用戶模型，只要任一字段改變就更新模型。
- var form = Ext.create('Ext.form.Panel', {
- listeners: {
- '> field': {
- change: function(field, newValue, oldValue) {
- ed.set(field.getName(), newValue);
- }
- }
- },
- items: //as before
- });
上面使用了Touch2.0的新功能—可以指定任何容器的子組件上的監(jiān)聽器。在這個(gè)case中，我們把監(jiān)聽器綁定到每個(gè)表單字段的變動(dòng)事件，這里的表單字段是表單面板的一個(gè)直接子部分。監(jiān)聽器取得觸發(fā)事件的字段的名字，用新值更新模型實(shí)例。例如，改變表單的電子郵件字段將會(huì)更新模型的電子郵件字段。
提交表單
有幾個(gè)提交表單數(shù)據(jù)的方法。在上面的例子里有一個(gè)更新模型實(shí)例，可選用模型的save方法把改變傳回服務(wù)器，而不用傳統(tǒng)的表單提交。我們也可以用submit方法發(fā)送一個(gè)普通瀏覽器表單提交。
- form.submit({
- url: 'url/to/submit/to',
- method: 'POST',
- success: function() {
- alert('form submitted successfully!');
- }
- });
在這個(gè)case里我們提供url來提交表單到內(nèi)置的提交調(diào)用—你可以在創(chuàng)建表單的時(shí)候設(shè)置url配置項(xiàng)。我們可以指定其他參數(shù)(參照全列表submit)，包括針對成功/失敗的回調(diào)函數(shù)，他們是否被調(diào)用取決于表單提交是否成功。在數(shù)據(jù)存儲(chǔ)到服務(wù)器后，這些回調(diào)函數(shù)通常用來在你的應(yīng)用中采取些動(dòng)作。
查看地址：http://www.html5mobi.com/document/st2/docs/index.html
原文地址：http://www.html5mobi.com/document/st2/docs/index.html#!/guide/forms
