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.

mwunderlich (7) [Avatar] Offline
#1
Hi,

I am currently working through this book (which is a great way of learning, like most of the "in action" series). However, I have come across a problem in chapter 4: The example for the toolbar panel - listing 4.1. - isn't rendering. Other code is running fine. I have copied the code for this example directly from the downloaded file (which I downloaded today, so it should be the latest version).
Any idea what might be wrong? See the code pasted below.



Cheers,



Martin




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext JS in Action Chapter 04 | Listing 4.1 Building toolbars for use in a Panel</title>
<link rel="stylesheet" type="text/css" href="/ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext3/ext-all-debug.js"></script>
</head>
<body>

<script type="text/javascript">
Ext.onReady(function() {
var myBtnHandler = function(btn) { // 1
Ext.MessageBox.alert('You Clicked', btn.text);
};

var fileBtn = new Ext.Button({ // 2
text : 'File',
handler : myBtnHandler
});
var editBtn = new Ext.Button({ // 3
text : 'Edit',
handler : myBtnHandler
});

var tbFill = new Ext.Toolbar.Fill(); // 4

var myTopToolbar = new Ext.Toolbar({ // 5
items : [
fileBtn,
tbFill,
editBtn
]
});

var myBottomToolbar = [ // 6
{
text : 'Save',
handler : myBtnHandler
},
'-',
{
text : 'Cancel',
handler : myBtnHandler
},
'->',
'Items open: 1'
];


var myPanel = new Ext.Panel({
width : 200,
height : 150,
title : 'Ext Panels rock!',
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
bbar : myBottomToolbar,
html : 'My first Toolbar Panel!'
});

});

</script>
</body>
</html>