官术网_书友最值得收藏!

首頁 >

Sencha Touch Cookbook

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
主站蜘蛛池模板： 定西市| 江陵县| 肥城市| 永登县| 罗定市| 黄山市| 根河市| 通州区| 河源市| 高平市| 黔江区| 大冶市| 临城县| 龙岩市| 新平| 新乡市| 磐石市| 波密县| 东台市| 阿克苏市| 聂荣县| 昌乐县| 南郑县| 盘锦市| 枣阳市| 德令哈市| 扬中市| 临汾市| 沂水县| 洪江市| 海南省| 江口县| 高要市| 衡阳市| 定州市| 台东市| 甘德县| 应用必备| 迁安市| 渭南市| 平原县|