PDA

View Full Version : cycle button not showing 'prependText' under 3.2.1?



epj
22 Feb 2013, 11:29 AM
Hi, all - my first post here.

I am trying to get up to speed with Ext JS - I bought the "Learning Ext JS 3.2" book (Packt), and am just trying to work through it, front to back.

On page 76 an example is given of creating a Toolbar with various kinds of buttons. That all works except for the cycle button is not showing any text on the button. The menu items appear fine, but after selecting one, the button text remains blank.

I tried to change out the 3.2.1 distribution for 3.4.0 thinking maybe this was a bug later fixed but no change. I tried to load the page under IE, and it is showing an error (though Mozilla Firefox loads and runs the page without error), so I'm not sure if the message is actually related to the error that IE reports or whether IE is just generally brain dead and that error has nothing to do with the cycle button. IE can successfully load and run the static menu and popup menu example as given on pages 71-75, so... it seems there is some issue with running the toolbar example.

The IE error is:

Message: 'tagName' is null or not an object
Line: 39086
Char: 19
Code: 0
URI: http://localhost:81/lib/extjs/ext-all-debug.js<br><br>Any ideas what's going on here? Maybe I've made some silly mistake that I can't see unrelated to the IE error? The full text of the web page I created is this:

<!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>
<title>toolbar.html</title>
<link rel="stylesheet" type="text/css"
href="/lib/extjs/resources/css/ext-all.css">
<script src="/lib/extjs/adapter/ext/ext-base.js"></script>
<script src="/lib/extjs/ext-all-debug.js"></script>

<script>
// Toolbar as defined on page 76
Ext.onReady(function() {

//console.log('onReady() called');

var tb = new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [
{ xtype: 'button',
text: 'Button'
},

{ xtype: 'cycle',
showtext: true,
minWidth: 100,
prependText: 'Quality: ',
items: [
{ text: 'High'},
{ text: 'Medium', checked: true},
{ text: 'Low'}
]
},

{ xtype: 'button',
text: 'Menu Button',
menu: [
{ text: 'Better'},
{ text: 'Good'},
{ text: 'Best'},
],
},

{ xtype: 'splitbutton',
text: 'Split Button',
menu: [
{ text: 'Ham'},
{ text: 'Spam'},
{ text: 'Eggs'},
{ text: 'Spam'},
],
},

{ text: 'Horizontal',
toggleGroup: 'orientation-selector'
},

{ text: 'Vertical',
toggleGroup: 'orientation-selector'
}
],
}); // new Toolbar
});
</script>

</head>

<body>
</body>

</html>

sword-it
23 Feb 2013, 6:13 AM
Hi
I think you have given wrong config "showtext: true" to the cycle button. It must be "showText: true".

epj
25 Feb 2013, 10:54 AM
Sword IT said:


I think you have given wrong config "showtext: true" to the cycle button. It must be "showText: true".


Ahh! You are quite correct - I did not see what the error was. :">

Thank you for your reply!