- 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
- Web程序設計及應用
- Mastering ServiceStack
- Unity 2020 Mobile Game Development
- 算法精粹：經典計算機科學問題的Java實現
- Django：Web Development with Python
- INSTANT CakePHP Starter
- C語言從入門到精通（第4版）
- Asynchronous Android Programming（Second Edition）
- 深入淺出React和Redux
- RealSenseTM互動開發實戰
- OpenMP核心技術指南
- Mastering Drupal 8
- 深入大型數據集：并行與分布化Python代碼
- Android項目實戰：博學谷
- Scratch編程入門與算法進階（第2版）