The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

gussmith (5) [Avatar] Offline
#1
The source code in the zip file on the Manning page for chapter 4.5 is:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../../touch/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../../touch/sencha-touch-all-debug.js"></script>

<script type="text/javascript">

Ext.application({
launch : function() {
var floatingPanel = new Ext.Panel({ //#1
height : 200,
width : 200,
draggable : true, //#2
floating : true, //#3
html : 'Some help could go here.',
left : 50, //#4
top : 50,
items : [
{
xtype : 'toolbar',
docked : 'top',
title : 'Drag me!'
}
]
});

Ext.Viewport.add(floatingPanel); //#5
var fsPanel = new Ext.Panel({
fullscreen : true,
style : 'background-color: #CCF;',
html : 'Full screen Panel'
});
}
});

</script>

</head>
<body></body>
</html>


The book has completely other source example.
gussmith (5) [Avatar] Offline
#2
Re: Chapter 4.5 source different than in PDF
mitchellsimoens (12) [Avatar] Offline
#3
Re: Chapter 4.5 source different than in PDF
I have issued a pull request to fix this source.
Dark Matter (2) [Avatar] Offline
#4
Re: Chapter 4.5 source different than in PDF
The github example has not been fixed yet. Even the example in the book is not working. I used Sencha touch 2.3.1. Code below:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../../../touch-2.3.1/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../../../touch-2.3.1/sencha-touch-all-debug.js"></script>

<script type="text/javascript">

Ext.Application({

launch: function() {
var handleNavigation = function(btn) {
var currentContainer = myContainer.getActiveItem(),
innerItems = myContainer.getInnerItems(),
totalItems = innerItems.length,
currentIndex = innerItems.indexOf(currentContainer),
direction,
newIndex;
if (btn.getText() == 'Back') {
direction = 'right';
newIndex = currentIndex > 0
? (currentIndex - 1) : (totalItems - 1);
}
else {
direction = 'left';
newIndex = currentIndex < (totalItems - 1)
? (currentIndex + 1) : 0;
}
myContainer.animateActiveItem(newIndex, {
type : 'slide',
direction : direction
});
};
var myContainer = Ext.create('Ext.Container',{
fullscreen : true,
activeItem : 1,
layout : {
type : 'card',
animation : 'slide'
},
items : [
{
xtype : 'toolbar',
docked : 'top',
title : 'Card Layout',
items : [
{
text : 'Back',
ui : 'back',
handler : handleNavigation
},
{ xtype : 'spacer' },
{
text : 'Forward',
ui : 'forward',
handler : handleNavigation
}
]
},
{
html : 'Card 1',
style : 'background-color: #99F;'
},
{
html : 'Card 2',
style : 'background-color: #F99;'
},
{
html : 'Card 3',
style : 'background-color: #9F9;'
}
]
});
}
});
</script>

</head>
<body></body>
</html>