---
title: "ExtJs Components with Syntax"  
description: "In 'ExtJs Components with its Syntax' article we can define all ExtJs component with  syntax."  
author: "Hemant Patel"  
published: 2017-01-17  
updated: 2019-03-31  
canonical: https://www.mindstick.com/articles/12233/extjs-components-with-syntax  
category: "sencha extjs"  
tags: ["sencha"]  
reading_time: 5 minutes  

---

# ExtJs Components with Syntax

Textfield:- Textfield is type of [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) in ExtJs.It can be used for take input(single line) from [client side](https://www.mindstick.com/forum/160418/what-are-the-best-practices-for-securely-storing-bearer-tokens-on-the-client-side).\

Code of Textfield is written as:-

```
               items: [{                    xtype: 'textfield',                    fieldLabel:’Text of Text Field'                         }] 
```

Textarea:-Textarea is type of component in ExtJs.It can be used for take input(Multi-line) from client side.

Syntax of Textarea is written as:-

```
                {                    xtype: 'textarea',                    fieldLabel:'Text of Text Area'                }
```

Displayfield:-Displayfield is type of component in ExtJs.It can be used for give output from [server side](https://www.mindstick.com/forum/143/close-popup-window-by-server-side-code) to client side.

##### Syntax of Displayfield is written as:-

```
               {                    xtype: 'displayfield',                    fieldLabel:'Text of Display Field'               }
```

Datefield:- Datefield is type of component in ExtJs.It can be used for take [input as](https://www.mindstick.com/forum/161323/how-can-you-take-input-as-bytes-using-sys-stdin-buffer-in-python) date from client side.

Syntax of Datefield is written as:-

```
               {                    xtype: 'datefield',                    fieldLabel:'Text of Date picker'               }
```

Button:- Button is type of component in ExtJs.It can be used for fire event on its click for perform action.

Syntax of Button is written as:-

```
                {                    xtype: 'button',                    text: 'Text of Button',                    width: 'As your requirement in %',                }
```

FieldContainer:- FieldContainer is type of component in ExtJs.It can be used as a container for contain another type of component like radiofield.

Syntax of FieldContainer is written as:-

```
                                 {                    xtype: 'fieldcontainer',                    fieldLabel: 'Text of Field container',                    defaultType: 'type of component like radiofield',                    defaults: {                        flex:1                              },                    layout: 'hbox',  //Type of layout                    items: [{                        boxLabel: 'Component text',                        inputValue: 'as your requirement',                        id:'as you wish'                              }]                }
```

Radiofield:- Radiofield is type of component in ExtJs.It can be used for take a single input from client side.Its used in a container.

Syntax of Radiofield is written as:-

```
                               {                    xtype: 'fieldcontainer',                    fieldLabel: 'Text of Radio Field',                    defaultType: 'radiofield',                    defaults: {                        flex:1                    },                    layout: 'hbox',   // Types of layout                    items: [{                        boxLabel: 'Text of radio button field',                        inputValue: 'as your requirement',                        id:'radio1'                    }, {                        boxLabel: ' Text of radio button field ',                        inputValue: ' as your requirement ',                        id: 'radio2'                    }, {                        boxLabel: ' Text of radio button field ',                        inputValue: ' as your requirement ',                        id:'radio3'                    }]                }
```

Checkbox:- Checkbox is type of component in ExtJs.It can be used for take multiple input on the basis of client selection.Its defined in a container.

Syntax of Checkbox is written as:-

```
                {                    xtype: 'fieldcontainer',                    fieldLabel: 'Text of Check Box Field',                    defaultType: 'checkboxfield',                    items: [{                        boxLabel: 'text of checkbox',                        inpuValue: 'as your need',                        id:'as your wish'                    }, {                        boxLabel: ' text of checkbox',                        inputValue: ' as your need ',                        id:' as your wish '                    }, {                        boxLabel: ' text of checkbox',                        inputValue: ' as your need ',                        id:' as your wish '                    }]                }
```

Hiddenfield:- Hiddenfield is type of component in ExtJs.It can be used for give from client side.

Syntax of Hiddenfield is written as:-

```
                             {                    xtype: 'hiddenfield',                    name: 'hidden field',                    value:'value from hidden field'                             }
```

Numberfield:- Numberfield is type of component in ExtJs.It can be used for accept only numeric from client side.

Syntax of Numberfield is written as:-

```
                   {                    xtype: 'numberfield',                    anchor: '100%',                    fieldLabel: 'Text of Numeric Field',                    maxValue: 99(maximum value),//its produce error while input value                     minValue:0(minimum value)               exceeded to maximum value              }
```

Spinnerfield:- Spinnerfield is type of component in ExtJs.It can be used for accept numeric value and increment [as your](https://answers.mindstick.com/qa/95660/how-do-you-remove-firefox-as-your-default-browser) [requirement](https://yourviews.mindstick.com/view/85169/becoming-an-influencer-requirement-of-skills-and-knowledge).

Syntax of Spinnerfield is written as:-

```
{                    xtype: 'spinnerfield',                    fieldLabel: 'Spinner Field',                    minValue: 0,                    increment:1,                    step: 6,                    //override onSpinUp (using step isn't neccessary)                    onSignUp: function (){                        var me = this;                        if (!me.readOnly)    {                            var val = me.step;//set the default value to step value                            if (me.getValue() !== '') {                                val =
                        parseInt(me.getValue().slice(0, -5));//gets rid of                                                       }                      "packs"                           
                       me.setValue((val+me.step)+'Pack');                                              }                                          },                     //override onSpinDown                    onSpinDown: function () {                        var me = this;                        if (!me.getValue() !==''){                            if(me.getValue()!==''){                            val = parseInt(me.getValue().slice(0,-5));                                                  }                        me.setValue((val -me.step)+'Pack');                                                   }                                             }                }
```

Timefield:- Timefield is type of component in ExtJs.It can be used for diplay a time slot to client for its selection.Its use as a combobox for time.

Syntax of Timefield is written as:-

```
               {                    xtype: 'timefield',                    fieldLabel: 'Text of Time Field label',                    minValue: '06:00 AM',//Minimum time slot                    maxValue: '08:00 PM',//Maximum time slot                    increment: 30,                    anchor:'100%'                }
```

ComboBox or [dropdown menu](https://www.mindstick.com/blog/708/css3-animated-dropdown-menu):- combobox is type of component in ExtJs.It can be used for diplay set of data to client for its selection.Its also [named as](https://answers.mindstick.com/qa/95800/jens-stoltenberg-has-been-named-as-the-governor-of-the-central-bank-of-which-country) [drop down](https://www.mindstick.com/forum/287/how-to-add-data-in-drop-down-list) list or menu for time.

Syntax of ComboBox is written as:-

```
{                    xtype: 'combobox',                    fieldLabel: 'Text of Combo
Box',                    store: Ext.create('Ext.data.Store', {                        fields: ['abbr', 'name'],                        data: [{                            'abbr': 'HTML',                            'name':'HTML'                        }, {                            'abbr': 'CSS',                            'name':'CSS'                        }, {                            'abbr': 'js',                            'name':'JavaScript'                        }]                    }),                    valueField: 'abbr',                    displayField:'name'                }
```

Filefield:- Filefield is type of component in ExtJs.It can be used for [upload files](https://www.mindstick.com/forum/159300/create-an-express-js-route-to-upload-files-to-the-server-using-multer-middleware) from client side.

Syntax of Filefield is written as:-

```
                   {                    xtype: 'filefield',                    fieldLabel: 'Text of File field',                    labelWidth: 50,                    msgTarget: 'side',                    allowBlank: false,                    anchor: '100%',                    buttonText:'Select File....'                  }
```

---

Original Source: https://www.mindstick.com/articles/12233/extjs-components-with-syntax

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.