Sencha Touch Cookbook
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Grouping fields with FieldSet

FieldSet is used to logically group together elements in a form, an example of which we saw in the first recipe of this chapter. This recipe shows how the Sencha Touch class can be used to create and group items under FieldSet.

Getting ready

Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.

Make sure that you have followed the Getting your form ready with FormPanel recipe in this chapter.

How to do it...

Carry out the following steps:

  1. Copy ch02_01.js to ch02_12.js.
  2. Open a new file named ch02_12.js and replace the definition of formBase with the following code: 
    var formBase = {
  items: [
    {
      xtype: 'fieldset',
      title: 'About Me',
      items: [
        {
          xtype: 'textfield',
          name : 'firstName',
          label: 'First Name'
        },
        {
          xtype: 'textfield',
          name : 'lastName',
          label: 'Last Name'
        }
      ]
    }
  ]
};
  3. Include ch02_12.js in place of ch02_10.js in index.html.
  4. Deploy and access the application in the browser.

How it works...

FieldSets can be constructed by using the Ext.form.FieldSet class instance or by using the xtype—fieldset. All elements which must be grouped under the field set must be added to the field set as child items. The FieldSet class implements the HTML <fieldset> element and uses legend to show the title.

There's more...

Suppose, when you are grouping the elements under the field set, you also want a way to add some instructions for it, to give more information to the user. The FieldSet class supports this and we will now see how to do it.

Adding instructions

The Ext.form.FieldSet class provides a property named instructions which we can use to add additional instructions. The following code snippet shows how to set this property:

xtype: 'fieldset',
title: 'About Me',
instructions: 'Fill in your personal detail',
…

The specified instruction is added at the bottom of the field set as shown in the following screenshot:

Adding instructions

See also

  • The recipe named Setting up the Android-based development environment in Chapter 1
  • The recipe named Setting up the iOS-based development environment in Chapter 1
  • The recipe named Setting up the Blackberry-based development environment in Chapter 1
  • The recipe named Setting up the browser-based development environment in Chapter 1
  • The recipe named Setting up the production environment in Chapter 1
  • The recipe named Getting your form ready with FormPanel in this chapter
上一章目录下一章