ExtJS 5 tab Panel with form elements – By Arindam

A Simple Example of Tab Panel in ExtJS 5. One of the tab has an html content whereas the other tab has form elements inside it.

Ext.create(‘Ext.tab.Panel’, {
width: 400,
height: 400,
renderTo: Ext.getBody(),
items: [{
title: ‘General’,
html:’A general tab with html text’
}, {
title: ‘User Info’,
items:[
{
xtype:’textfield’,
fieldLabel:’Name’,
value:’Carter’
},{
xtype:’numberfield’,
fieldLabel:’ID’,
value:1610729132
},
{
xtype:’button’,
text:’submit’,
handler:function(){
alert(‘Submit’);
}
}
]
}]
});

Output

User Tab

General Tab

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s