JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css">
<script src="http://dev.sencha.com/deploy/touch/sencha-touch.js"></script>
JavaScript
/**
* We will just need to extend the original tabpanel to
* have the ability to create extra text node in front
* of all the tabs (Check Ext.TabBar)
*/
var FunkyTabPanel = Ext.extend(Ext.TabPanel, {
initComponent: function() {
//we need it to initialize the tab bar first
FunkyTabPanel.superclass.initComponent.call(this);
//Then we hack in our text node. You can add cls/style too
this.tabBar.insert(0, {
text: this.title,
style: 'color:#fff;'
});
}
});
//That's it! Happy playing :)
Ext.setup({
onReady: function() {
new FunkyTabPanel({
renderTo: Ext.getBody(),
fullscreen: true,
//So this will be the text!
title: 'Months',
//And your usual items
items: [{
html: 'January',
title: 'January'
},{
html: 'February',
title: 'February'
}]
});
}
});