View Full Version : custom form field

8 May 2014, 12:06 AM
Hi , I was looking into Ext.form.field.Base in docs, and I found following example over there , I am confused with output. How come by default text box is rendered ?

Here is snippet

Ext.define('Ext.form.SearchField', {
extend: 'Ext.form.field.Base',
alias: 'widget.searchfield',

inputType: 'search',

// Config defining the search URL
searchUrl: 'http://www.google.com/search?q={0}',

// Add specialkey listener
initComponent: function() {
this.on('specialkey', this.checkEnterKey, this);

// Handle enter key presses, execute the search if the field has a value
checkEnterKey: function(field, e) {
var value = this.getValue();
if (e.getKey() === e.ENTER && !Ext.isEmpty(value)) {
location.href = Ext.String.format(this.searchUrl, value);

Ext.create('Ext.form.Panel', {
title: 'Base Example',
bodyPadding: 5,
width: 250,

// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
items: [{
xtype: 'searchfield',
fieldLabel: 'Search',
name: 'query'
renderTo: Ext.getBody()

Please clarify.

8 May 2014, 1:04 AM
By default it renders a input field of type text.

What are you expecting? What is more basic than that?

8 May 2014, 2:14 AM
I mean , how come text box ? is it default behaviour or what ? How can I remove that and two drop down ?

8 May 2014, 2:44 AM
Yes that is default behaviour. Take a look at the source for that component.

If you want a drop down why not use Ext.form.field.ComboBox?