Hi Jamie, here's the script:
Code:
Ext.define('Ext.ux.TabbedToolBar', {
extend: 'Ext.Toolbar',
xtype: 'ext.ux.tabbedtoolbar',
config: {
scrollable: { direction: 'horizontal', indicators: false },
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
}
}
});
Ext.setup({
onReady: function() {
Ext.Viewport.add({
itemId: 'pnlViewport',
layout: {
type: 'card',
animation: 'scroll'
},
items: [
{
xtype: 'ext.ux.tabbedtoolbar',
itemId: 'barModuleButtons',
docked: 'bottom',
layout: {
pack: 'left'
},
items: [
{
xtype: 'segmentedbutton',
itemId: 'barModuleButtonsParent',
items: [
{
xtype: 'button',
iconAlign: 'top',
iconCls: 'home',
iconMask: true,
text: 'Home',
listeners: {
tap: function() {
Portal.ns.pnlViewport.setActiveItem(0);
}
}
}
]
}
]
},
{
xtype: 'panel',
itemId: 'pnlPortalHome',
html: 'Dasboard widgets would be shown here'
},
{
xtype: 'panel',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'panel',
itemId: 'pnlPortalNav',
width: 250,
type: 'dark',
layout: {
type: 'card',
animation: 'scroll'
}
},
{
xtype: 'panel',
itemId: 'pnlPortalContent',
flex: 1,
layout: {
type: 'card',
animation: 'scroll'
},
items: [
{
title: 'File Share',
html: 'File preview or File list goes here'
},
{
title: 'andrew.case',
html: 'Mail preview or Mail list goes here'
},
{
title: 'WorkSite',
html: 'WorkSite document list goes here'
},
{
title: 'SharePoint',
html: 'Folder contents go here'
}
]
}
]
}
]
});
}
});
and this is the html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="Stylesheet" href="../touch/resources/css/sencha-touch.css" />
<script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="Test.js"></script>
</head>
<body>
</body>
</html>
Notice it would work with sencha-touch-all.js but not with sencha-touch-all-debug.js.
Perhaps it has to be with the dots in the xtype. But then I have 2 concerns here:- We are normally accustomed to using dots in xtypes in Ext, its very helpful to avoid naming conflicts when using components/plugins from various sources/vendors.
I have read that you have disallowed dots for performance. If you are not gonna take back that design decision, then maybe I can replace dots with an underscore. - Why would it work with minified but not with debug.