朗诵背景视频无水印

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:

Copy ch02_01.js to ch02_05.js.

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'}
            ]
            }]
        };

Include ch02_05.js in place of ch02_04.js in index.html.
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'}
  ]
}

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

Working with the select field

Getting ready

How to do it...

How it works...

There's more...

Using the custom display value

See also

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

Sencha Touch Cookbook

Working with the select field

Getting ready

How to do it...

How it works...

There's more...

Using the custom display value

See also