- 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
- Learning Neo4j
- 深入理解Android（卷I）
- ASP.NET Core 5.0開發入門與實戰
- Learning Chef
- JIRA 7 Administration Cookbook（Second Edition）
- Mastering Spring MVC 4
- 軟件測試工程師面試秘籍
- Object-Oriented JavaScript（Second Edition）
- C語言程序設計
- Android程序設計基礎
- Django 3.0入門與實踐
- OpenCV Android Programming By Example
- UML軟件建模
- Android編程權威指南（第4版）
- Google Adsense優化實戰