PDA

View Full Version : New to Ext JS, no dialog box displayed.



mlotfi
27 Mar 2012, 1:35 PM
Hi,

I had bought the book Learning EXT JS 3.2 a while ago, I just opened it today and start to read and learn, but when I got to the page : 36 :



<html>
<head>
<link type="text/css" rel="stylesheet" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"/>
<style type="text/css">
.milton-icon {
background: url(navbit-home.png) no-repeat;
}
</style>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
<script>
Ext.onReady(function(){
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
},
icon: 'milton-icon',
fn: function(btn) {
switch(btn){
case 'yes':
Ext.Msg.prompt('Milton', 'Where is it?', function(btn,txt)
{
if (txt.toLowerCase() == 'the office') {
Ext.get('my_id').dom.innerHTML = 'Dull Work';
}else{
Ext.get('my_id').dom.innerHTML = txt;
}
Ext.DomHelper.applyStyles('my_id',{
background: 'transparent
url(images/stapler.png) 50% 50% no-repeat'
});
});
break;
case 'no':
Ext.Msg.alert('Milton',
'I\'m going to burn the building down!');
break;
case 'cancel':
Ext.Msg.wait('Saving tables to disk...','File Copy');
break;
}
}
});
});
</script>
</head>
<body>
<div id='my_id' style='width:200px;height:200px;'>test</div>
</body>
</html>


The page has only :
test
in the top left of the page.
when I delete :



case 'yes':
Ext.Msg.prompt('Milton', 'Where is it?', function(btn,txt)
{
if (txt.toLowerCase() == 'the office') {
Ext.get('my_id').dom.innerHTML = 'Dull Work';
}else{
Ext.get('my_id').dom.innerHTML = txt;
}
Ext.DomHelper.applyStyles('my_id',{
background: 'transparent
url(images/navbit-home.png) 50% 50% no-repeat'
});
});
break;


It works .

Please your help is appreciated.
thanks

mitchellsimoens
27 Mar 2012, 2:14 PM
In that code you had a JavaScript syntax error. This is better:


Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
},
icon: 'milton-icon',
fn: function(btn) {
switch(btn){
case 'yes':
Ext.Msg.prompt('Milton', 'Where is it?', function(btn,txt) {
if (txt.toLowerCase() == 'the office') {
Ext.get('my_id').dom.innerHTML = 'Dull Work';
} else {
Ext.get('my_id').dom.innerHTML = txt;
}

Ext.DomHelper.applyStyles('my_id', {
background: 'transparenturl(images/stapler.png) 50% 50% no-repeat'
});
});
break;
case 'no':
Ext.Msg.alert('Milton','I\'m going to burn the building down!');
break;
case 'cancel':
Ext.Msg.wait('Saving tables to disk...','File Copy');
break;
}
}
});

mlotfi
27 Mar 2012, 2:37 PM
Thank you very much, it's working now.

How to debug an error like this ?
thanks