JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2/resources/css/ext-all.css">
JavaScript
Ext.onReady(function() { // Every property is declared inside the class
Ext.define('MyCustomPanel1', {
extend: 'Ext.panel.Panel',
alias: 'mycustompanel1',
title: 'I am a custom Panel 1',
html: 'This is the content of my custom panel 1',
renderTo: Ext.getBody()
});
Ext.define('MyCustomPanel2', { // HTML is declared inside the class, title inside the config, constructor overridden
extend: 'Ext.panel.Panel',
alias: 'mycustompanel2',
renderTo: Ext.getBody(),
html: 'This is the content of my custom panel 2',
config: {
title: 'I am a custom Panel 2'
},
constructor: function(config) {
this.callParent(arguments);
this.initConfig(config)
}
});
Ext.define('MyCustomPanel3', { // Title and HTML declared inside config, constructor overridden
extend: 'Ext.panel.Panel',
alias: 'mycustompanel3',
renderTo: Ext.getBody(),
config: {
title: 'I am a custom Panel 3',
html: 'This is the content of my custom panel 3'
},
constructor: function(config) {
this.callParent(arguments);
this.initConfig(config)
}
});
Ext.define('MyCustomPanel4', { // title and html inside of initComponent, title override in instance declaration doesn't hold. HTML property is empty on render
extend: 'Ext.panel.Panel',
alias: 'mycustompanel4',
renderTo: Ext.getBody(),
initComponent: function(config) {
Ext.apply(this, {
title: 'I am a custom Panel 4',
html: 'This is the content of my custom panel 4'
})
this.callParent(arguments);
}
});
Ext.define('MyCustomPanel5', { // title declared inside config, html set inside of initComponent. Both...