- Sencha Touch Cookbook
- Ajit Kumar
- 455字
- 2021-08-20 15:56:08
Working with search
In this and the subsequent recipes of the chapter, we will go over each of the form fields and understand how to work with them. This recipe describes the steps required to create and use a search form field.
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.
How to do it...
Carry out the following steps:
- Copy
ch02_01.jstoch02_02.js. - Open a new file named
ch02_02.jsand replace the definition offormBasewith the following code:var formBase = { items: [{ xtype: 'searchfield', name: 'search', label: 'Search' }] }; - Include
ch02_02.jsin place ofch02_01.jsinindex.html. - Deploy and access the application in the browser. You will see a form panel with a search field.
How it works...
The search field can be constructed by using the Ext.form.Search class instance or by using the xtype—searchfield . The search form field implements HTML5 <input> with type="search". However, the implementation is very limited. For example, the HTML5 search field allows us to associate a data list to it which it can use during the search, whereas this feature is not present in Sencha Touch. Similarly, the W3 search field spec defines a pattern attribute to allow us to specify a regular expression against which a User Agent is meant to check the value, which is not supported yet in Sencha Touch. For more detail, you may refer to the W3 search field (http://www.w3.org/TR/html-markup/input.search.html) and the source code of the Ext.form.Search class.
There's more...
Often, in the application, for the search fields we do not use a label. Rather, we would like to show a text, such as Search inside the field that will disappear when the focus is on the field. Let's see how we can achieve this.
Placeholders are supported by most of the form fields in Sencha Touch by using the property placeHolder. The placeholder text appears in the field as long as there is no value entered in it and the field does not have the focus. The following code snippet shows the typical usage of it:
{
xtype: 'searchfield',
name: 'search',
label: 'Search',
placeHolder: 'Search...'
}
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
- Modular Programming with Python
- JavaScript 從入門到項目實踐（超值版）
- Java面向對象思想與程序設計
- Oracle從新手到高手
- Arduino開發實戰指南：LabVIEW卷
- C語言程序設計基礎與實驗指導
- 認識編程：以Python語言講透編程的本質
- Python從菜鳥到高手（第2版）
- PowerCLI Cookbook
- D3.js By Example
- SQL Server 入門很輕松（微課超值版）
- R的極客理想：量化投資篇
- Mastering Machine Learning with R
- JSP應用與開發技術（第3版）
- R Data Visualization Cookbook