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

Working with the select field

This recipe describes the use of the select form field, which allows the user to select a value from a list of choices, such as a combo box.

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_05.js.
  2. Open a new file named ch02_05.js and replace the definition of formBase with the following code: 
            var formBase = {
            items: [{
                    xtype: 'selectfield',
                    name: 'select',
                    label: 'Select',
                    placeHolder: 'Select...',
          options: [
                {text: 'First Option',  value: 'first'},
                {text: 'Second Option', value: 'second'},
                {text: 'Third Option',  value: 'third'}
            ]
            }]
        };
  3. Include ch02_05.js in place of ch02_04.js in index.html.
  4. Deploy and access the application in the browser.

How it works...

The preceding code creates a select form field with the three options for selection. The select field can be constructed by using the Ext.form.Select class instance or by using the xtype—selectfield. The select form field implements HTML <select>. By default, it uses the text property to show the text for selection.

There's more...

It may not always be possible or desirable to use text and value properties in the date to populate the selection list. If we have a different property in place of text, then how do we make sure that the selection list is populated correctly without any further conversion? Let's see how we can do this.

Using the custom display value

We, use displayField to specify the field that will be used as text, as shown in the following code:

{
  xtype: 'selectfield',
  name: 'select',
  label: 'Second Select',
  placeHolder: 'Select...',
  displayField: 'desc',
  hiddenName: 'second-select'
  ,options: [
    {desc: 'First Option',  value: 'first'},
    {desc: 'Second Option', value: 'second'},
    {desc: 'Third Option',  value: 'third'}
  ]
}

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
上一章目录下一章