- Sencha Touch Cookbook
- Ajit Kumar
- 393字
- 2021-08-20 15:56:09
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:
- Copy
ch02_01.jstoch02_05.js. - Open a new file named
ch02_05.jsand replace the definition offormBasewith 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.jsin place ofch02_04.jsinindex.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.
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
- Learning Python Web Penetration Testing
- Data Visualization with D3 4.x Cookbook（Second Edition）
- Testing with JUnit
- x86匯編語言：從實模式到保護模式（第2版）
- SQL基礎教程（第2版）
- PHP+MySQL+Dreamweaver動態網站開發從入門到精通（第3版）
- Python機器學習算法: 原理、實現與案例
- 從零開始學C#
- C++語言程序設計
- Learning Nessus for Penetration Testing
- AI自動化測試：技術原理、平臺搭建與工程實踐
- 深入淺出 HTTPS：從原理到實戰
- Visual Basic語言程序設計上機指導與練習（第3版）
- Learning Shiny
- SQL Server 2014 Development Essentials