---
title: "Simple user form with maximum component fields of ExtJs"  
description: "In this article we are defined maximum components of ExtJs in a simple user form.  This form having textfield component that’s mostly used in ExtJs fo"  
author: "Hemant Patel"  
published: 2017-01-18  
updated: 2018-03-17  
canonical: https://www.mindstick.com/blog/11266/simple-user-form-with-maximum-component-fields-of-extjs  
category: "sencha extjs"  
tags: ["sencha"]  
reading_time: 2 minutes  

---

# Simple user form with maximum component fields of ExtJs

In this [article](https://www.mindstick.com/articles/95867/are-you-looking-for-500-credit-score-mortgage-lenders-houston-continue-reading-this-article) we are defined maximum [components](https://www.mindstick.com/blog/74096/understanding-the-role-of-some-integral-ac-components) of ExtJs in a [simple user](https://answers.mindstick.com/qa/104389/how-to-design-a-simple-user-interface) form.\

This form [having](https://answers.mindstick.com/qa/92506/what-is-the-difference-between-having-clause-and-where-clause-in-sql-server) textfield [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) that’s mostly used in ExtJs form.Its also having

Textareafield,datefield,radio buttonfield,[checkbox](https://www.mindstick.com/articles/291/how-should-use-checkbox-control-in-vb-dot-net) field,[combobox](https://www.mindstick.com/articles/57/display-record-according-to-combobox-selection-in-csharp-dot-net)([dropdown menu](https://www.mindstick.com/forum/158697/how-can-implement-a-dropdown-menu-or-navigation-bar-with-hover-effects-using-jquery)) component,timefield and file field.

Its provide great facility to learn Extjs component in a single user form.

\

![Simple user form with maximum component fields of ExtJs](https://www.mindstick.com/blogs/c3550800-7e9f-4dc2-bb08-31f864db0916/images/3ceb8692-5cb9-47a3-b162-3199fed6f22c.png)\

```
Ext.onReady(function () {    Ext.create('Ext.form.Panel', {  // create object of form.panel class        width: 600,        height: 600,        padding:50,        layout: 'form',  // Define Layout        layout: {            type: 'vbox',//define layout type            pack: 'center'        },                renderTo: Ext.getBody(),//render to body of html page        items: [            {            xtype: 'textfield',//textfield component            fieldLabel: 'Name',        }, {            xtype: 'textfield',            fieldLabel: 'Father Name'        }, {            xtype: 'textarea',//textarea component            fieldLabel: 'Address'        }, {            xtype: 'datefield',//datefield component            fieldLabel: 'D.O.B'        }, {            xtype: 'fieldcontainer',//fieldcontainer component for radiofield            fieldLabel: 'Gender',            layout: 'hbox',            defaultType: 'radiofield',            defaults: {                flex: 1            },            items: [            {                        //radiofield items                boxLabel: 'Male',                inputValue: 'male',                id: 'rdioBtnMle'            }, {                                       boxLabel: 'Female',  //radiofield
items                inputValue: 'female',                id: 'rdioBtnFmle'            }, {                boxLabel: 'Others',  //radiofield
items                inputValue: 'other',                id: 'rdioBtnOthr'            }]        }, {            xtype: 'fieldcontainer',//fieldcontainer component for checkbox            fieldLabel: 'Education',            layout: 'vbox',            defaultType: 'checkboxfield',            defaults:{                    flex:1            },            items: [{                boxLabel: 'HighSchool',// checkbox items                inputValue: 'highSchool',                id:'chckBxHgSch'            }, {                boxLabel: 'Intermediate',// checkbox item                inputValue: 'intermediate',                id:'chckbxIntrMdte'            }, {                boxLabel: 'Graduation',// checkbox item                inputValue: 'graduation',                id:'chckBxGdtn'            }, {                boxLabel: 'Post graduation',// checkbox item                inputValue: 'postgarduation',                id:'chckBxPstGdtn'            }]        }, {            xtype: 'combobox',//combobox component            fieldLabel: 'Course',            store:Ext.create('Ext.data.Store',{            fields: ['abbr', 'name'],            data: [{        //combobox
item                abbr: 'be',                name:'BE/B.tech'            }, {                abbr: 'b.a',//combobox item                name:'B.A'            }, {                abbr: 'bcom',//combobox item               
name:'B.Com'            }, {                abbr: 'bsc',//combobox item                name:'B.Sc'            }]            }),            valueField: 'abbr',            displayField:'name'        }, {            xtype: 'numberfield',//numberfield component            fieldLabel:'Contact'        }, {            xtype: 'timefield',//timefield component            fieldLabel: 'Time',            minValue: '06:00 AM',            maxValue:'08:00 PM'        }, {            xtype: 'filefield',// filefield component            fieldLabel:'Upload Photo'        }, {            xtype: 'button',//Button component of extjs            text: 'Submit',            width:'50%'        }]    });});
```

\

---

Original Source: https://www.mindstick.com/blog/11266/simple-user-form-with-maximum-component-fields-of-extjs

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