PDA

View Full Version : Using Jquery Carousel in Extjs 4.0 MVC



santho89
27 Oct 2012, 6:10 PM
Hi, I am new to EXTJS and have been building an app that requires heavy user interaction. First of the list i want to implement a jquery carousel in my extjs application. I want to add this carousel

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

This is what i have so far. I am just building a view that will have a list of images displayed from a store.


Ext.define('Gen.view.GenImage',{
extend: 'Ext.view.View',
alias: 'widget.memeimagestrip',
region: 'north',
cls: 'imageSlider',
height: 75,
id: 'someid',
store: 'Genimg',
autoScroll: true,
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}" width="60" height="60"></div></div>',
'</tpl>',
],
itemSelector: 'div.thumb-wrap',

afterRender: function() {
console.log('After render fired');
$("#someid").jcarousel();
this.callParent();
}
})

This is the error i am getting.

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

I am not sure why i am getting it. Can somebody please help.


(http://sorgalla.com/projects/jcarousel/examples/static_simple.html)

mitchellsimoens
29 Oct 2012, 6:25 AM
Have you tried it after the callParent?

James Goddard
29 Oct 2012, 8:31 AM
You may need to do this on a refresh event not render. You can get the render before the data is loaded. Also you are loading the carousel on the panel, not on the body. You probably want to do it on the panel's body element.