JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/css/Portal.css">
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/css/GroupTab.css">
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/GroupTabPanel.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/GroupTab.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/Portal.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/PortalColumn.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/Portlet.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/shared/examples.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/portal/sample-grid.js"></script>
CSS
/* styles for iconCls */
.x-icon-tickets {
background-image: url('images/tickets.png');
}
.x-icon-subscriptions {
background-image: url('images/subscriptions.png');
}
.x-icon-users {
background-image: url('images/group.png');
}
.x-icon-templates {
background-image: url('images/templates.png');
}
JavaScript
/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/
Ext.onReady(function() {
// Ext.QuickTips.init();
// create some portlet tools using built in Ext tool ids
var tools = [{
id: 'gear',
handler: function() {
// Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}},
{
id: 'close',
handler: function(e, target, panel) {
// panel.ownerCt.remove(panel, true);
}}];
var viewport = new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'panel',
title: "Your title",
layout: 'fit',
items: [{
xtype: 'grouptabpanel',
tabWidth: 130,
activeGroup: 0,
items: [{
mainItem: 1,
items: [{
title: 'Tickets',
layout: 'fit',
iconCls: 'x-icon-tickets',
tabTip: 'Tickets tabtip',
style: 'padding: 10px;',
items: new SampleGrid([])]},
{
xtype: 'portal',
title: 'Dashboard',
tabTip: 'Dashboard tabtip',
items: [{
columnWidth: .33,
style: 'padding:10px 0 10px 10px',
items: [{
//title: 'Grid in a Portlet',
//layout: 'fit',
//tools: tools,
//items: new SampleGrid([0, 2, 3])
title: 'Panel 2',
tools: tools,
html: 'Ext.example.shortBogusMarkup'
...