Sencha Touch Cookbook
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

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:

  1. Copy ch02_01.js to ch02_02.js.
  2. Open a new file named ch02_02.js and replace the definition of formBase with the following code: 
    var formBase = {
  items: [{
    xtype: 'searchfield',
    name: 'search',
    label: 'Search'
  }]
};
  3. Include ch02_02.js in place of ch02_01.js in index.html.
  4. 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.

Using a placeholder

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
上一章目录下一章