/** * The Search field creates an HTML5 search input and is usually created inside a form. * Because it creates an HTML search input type, the visual styling of this input is * slightly different to normal text input controls (the corners are rounded), though the virtual * keyboard displayed by the operating system is the standard keyboard control. * * As with all other form fields, the search field gains a "clear" button that appears * whenever there is text entered into the form, and which removes that text when tapped. * * ```javascript * @example({ framework: 'extjs' }) * Ext.create('Ext.form.Panel', { * fullscreen: true, * items: [{ * xtype: 'fieldset', * title: 'Search', * items: [{ * xtype: 'searchfield', * label: 'Query', * name: 'query' * }] * }] * }); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtContainer, ExtFormPanel, ExtSearchField } from '@sencha/ext-react' * * export default class SearchFieldExample extends Component { * state = { }; * search = (field, value) => { * this.setState({ query: value }); * } * * render() { * const { query } = this.state; * * return ( * <ExtContainer layout="center"> * <ExtFormPanel shadow> * <ExtSearchField * value={query} * width="300" * placeholder="Search..." * onChange={this.search} * /> * { query && <div>You searched for "{query}"</div> } * </ExtFormPanel> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtContainer layout="center"> * <ExtFormPanel shadow="true" > * <ExtSearchField * [value]="query" * width="300" * placeholder="Search..." * (change)="search($event)" * > * </ExtSearchField> * <div>You searched for "{{query}}"</div> * </ExtFormPanel> * </ExtContainer> * ` * }) * export class AppComponent { * query:string = ""; * search = (event) => { * console.log("In search : " + event.newValue); * this.query = event.newValue; * } * } * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-container layout="center"> * <ext-formpanel shadow="true"> * <ext-searchfield * width="300" * placeholder="Search..." * onChange="searchfield.search" * onready="searchfield.searchFieldReady()" * > * </ext-searchfield> * <ext-container * onready="searchfield.searchMessageReady()" * > * </ext-container> * </ext-formpanel> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-searchfield.component'; * * export default class SearchFieldComponent { * * search = (field, value) => { * this.searchFieldView.setValue(value); * this.searchMessage.setHTML(`<div>You searched for ${value} </div>`); * } * * searchFieldReady = (event) => { * this.searchFieldView = event.detail.cmp; * } * * searchMessageRead = (event) => { * this.searchMessage = event.detail.cmp; * } * } * * window.searchfield = new SearchFieldComponent(); * ``` * * Or on its own, outside of a form: * * Ext.create('Ext.field.Search', { * label: 'Search:', * value: 'query' * }); * * Because search field inherits from {@link Ext.field.Text textfield} it gains all of the * functionality that text fields provide, including getting and setting the value at runtime, * validations and various events that are fired as the user interacts with the component. * Check out the {@link Ext.field.Text} docs to see the additional functionality available. */Ext.define('Ext.field.Search', { extend: 'Ext.field.Text', xtype: 'searchfield', alternateClassName: 'Ext.form.Search', requires: [ 'Ext.field.trigger.Search' ], inputType: 'search', triggers: { search: { type: 'search', side: 'left' } }, classCls: Ext.baseCSSPrefix + 'searchfield'});