PDA

View Full Version : Cannot Get Ext.ux.Carousel Example To Work



rkanemeier
15 Dec 2012, 6:43 PM
I was wanting to improve the user experience of web apps "welcome" page. I am interested in using the Ext carousel. However, I am unable to make the example work. I found the working example here:

http://dev.sencha.com/playpen/ext-core-latest/examples/carousel/

Here is the code I am using:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel Example</title>
<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/resources/welcome/carousel.css" />


<script type="text/javascript" src="/extjs4/ext-all.js"></script>


<script type="text/javascript" src="/resources/welcome/carousel.js"></script>
<script type="text/javascript">


Ext.onReady(function(){

new Ext.ux.Carousel('html-example', {
itemSelector: 'div.item',
interval: 5,
autoPlay: true,
transitionEasing: 'easeIn'
});

});


</script>


<style>
div.item {
padding: 20px;
}
</style>




</head>
<body>


<h3>Configuration with HTML and transitionEasing: 'easeIn'</h3>
<div id="html-example" style="padding: 5px; height: 250px; width: 600px; background-color: #F6F6F0; color: black">
<div class="item" title="Some markup and list">
<h3>List</h3>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin odio sapien, sagittis id, sollicitudin eget, scelerisque et, nibh. Vestibulum faucibus, erat at varius dapibus, magna ante consectetur turpis, faucibus dapibus nunc justo laoreet nulla. Praesent lorem purus, consequat at, posuere id, convallis non, nibh. Maecenas vehicula lectus at turpis ultrices placerat.</p>
</div>
<div class="item" title="Lorem Ipsum text">
<h3>Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin odio sapien, sagittis id, sollicitudin eget, scelerisque et, nibh. Vestibulum faucibus, erat at varius dapibus, magna ante consectetur turpis, faucibus dapibus nunc justo laoreet nulla. Praesent lorem purus, consequat at, posuere id, convallis non, nibh. Maecenas vehicula lectus at turpis ultrices placerat.</p>
</div>
<div class="item" title="More of that text">
<h3>More Text</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin odio sapien, sagittis id, sollicitudin eget, scelerisque et, nibh. Vestibulum faucibus, erat at varius dapibus, magna ante consectetur turpis, faucibus dapibus nunc justo laoreet nulla. Praesent lorem purus, consequat at, posuere id, convallis non, nibh. Maecenas vehicula lectus at turpis ultrices placerat.</p>
</div>
</div>




</body>
</html>


The console is showing the following errors (in this order):




Uncaught TypeError: Object #<Object> has no method 'addClass' carousel.js:214 (http://fp825dev:6031/vvresources/welcome/carousel.js)


Uncaught TypeError: Cannot call method 'start' of undefined carousel.js:208 (http://fp825dev:6031/vvresources/welcome/carousel.js)



Here are the chunks of code the errors are referring to:

This is for line 214


this.playTaskBuffer = this.playTaskBuffer || new Ext.util.DelayedTask(function() {
Ext.TaskMgr.start(this.playTask);http://www.sencha.com/forum/chrome-devtools://devtools/Images/errorIcon.pngUncaught TypeError: Cannot call method 'start' of undefined



}, this);


This is for line 208


if(this.showPlayButton) {
this.els.navPlay.addClass('ux-carousel-playing');http://www.sencha.com/forum/chrome-devtools://devtools/Images/errorIcon.pngUncaught TypeError: Object #<Object> has no method 'addClass'



}
this.fireEvent('play');


How do I determine why the navPlay object does not have the addClass? And why doesn't Ext.TaskMgr have a start method?

mitchellsimoens
17 Dec 2012, 7:56 AM
The last release of Ext Core was for Ext JS 3 so the above won't work with Ext JS 4.

rkanemeier
17 Dec 2012, 8:36 AM
Thanks Mitchell! I spent far too long on that this weekend. I'll have to look into how to extend ExtJS to make my own. That's probably what all newbies should do anyway in order to get a better feel for what ExtJS is doing under the covers.