How to Define a Simple Class and call by Xtype in ExtJS 5 – by Arindam

We can directly use a built in class in ExtJS. But sometime we need to define a class (which is very important when you want an MVC application structure). This simple example shows how to define a class and use it in ExtJS.

Define the Class:

Ext.define('myCustomPanel',{
title:'',
extend:'Ext.panel.Panel',
xtype:'customXtypeDefined',
items:[
{
xtype:'textfield',
emptyText:'Type Your Message'
},
{
xtype:'button',
text:'Save'
}
]
});

Calling this class can be done in two ways.

i) By using Class name –

Ext.create('myCustomPanel',{
width: 400,
height: 400,
title:'General',
renderTo: Ext.getBody()
});

ii) By using Xtype:

Ext.create('Ext.panel.Panel',{
width: 400,
height: 400,
title:'General',
items:[
{
xtype:'customXtypeDefined'
}
],
renderTo: Ext.getBody()
});

Both will render the same output.

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