0

I am trying to build a dynamic image carousel using Sencha Architect. I have a carousel added to a tab panel. The carousel is set up to read images from a store called "pictureStore." I have a function to pull images from the store and create the carousel items - I can get the images from the store but unable to create the carousel. When I try to use carouself.setItems() or carousel.add() I get an error "Object # has no method". Please take a look and let me know if my method is incorrect for creating a dynamic carousel. I appreciate your help and knowledge of how to fix

Thanks,

Function to read images and create carousel items (works up until comment below):

onMycarouselActivate: function(container, newActiveItem, oldActiveItem, options) {
        Ext.getStore('pictureStore').load(function(pictures) {
            var items = [];

            Ext.each(pictures, function(picture) {
                console.log(picture.get('image'));
                if (!picture.get('image')) {
                    return;
                }

                items.push({
                    xtype: 'myimage',
                    picture: picture
                });
            });

            //following doesn't work for adding the carousel images:

            //carousel.setItems(items);
            //carousel.add(items);
            //carousel.items = [{html: items}];
            //carousel.add(carousel.items);
            //carousel.setActiveItem(0);
        });
    },

Sample JSON with image info

{
    "test": {
        "cat": {
            "entries": [
                {
                    "image": "/images/1.png"
                },
                {
                    "image": "/images/2.png"
                }
            ]
        }
    }
}

Error messages when using carousel.add or carousel.setItems:

Object #<HTMLDivElement> has no method 'add' 
Object #<HTMLDivElement> has no method 'setItems' 

3 Answers 3

0

If your variable carousel has no method add or setItems then it's probably not your carousel.

To make sure of that, you can try to do console.log(carousel); to figure out what it is exactly. Also, it doesn't seem to be declared anywhere in your code...

But it's quite simple to fix. I presume you've added a event listener to your carousel that listens to the activate event and if you take a look at the documentation for this event, you can see that the first parameter sent to the callback function is the container (in this case your carousel)

So what you have to write is this :

onMycarouselActivate: function(carousel, newActiveItem, oldActiveItem, options) {

instead of this

onMycarouselActivate: function(container, newActiveItem, oldActiveItem, options) {

and you should be all set

EDIT

Also if you take a look at the documentation for the image component, you can see there is no picture in the config but there is a src attribute. SO you should write :

items.push({
  xtype: 'myimage',
  src: picture
});

Hope this helped

5
  • when you create the listener through Architect it puts container as first parameter and there does not appear to be a way to change it except though code outside of Architect. I did this and was able to get past the error but the images are still not added to the carousel, although I see the carousel now on the screen. I have followed this example if that helps any edspencer.net/2012/02/…
    – Arkady
    Jul 23, 2012 at 21:00
  • It's just a variable name so if Architect names it 'container' then use container in your code. Also see my edited answer. Jul 23, 2012 at 21:07
  • Thanks again, I applied your update but still can't get the images appear. I have tried to force an update by calling carousel.doLayout() and Ext.getCmp('carousel').doLayout(); after setItems() but get the error of Object #<HTMLDivElement> has no method 'doLayout'. Am not sure what the issue is
    – Arkady
    Jul 23, 2012 at 23:35
  • 1
    This function doesn't exist anymore in ST2. Read the documentation before trying something. Jul 24, 2012 at 8:05
  • doLayout() has all sorts of rendering time madness, you should try to never use it.
    – Dawesi
    Sep 5, 2012 at 12:43
0

try this code

 myCarousel.add({
                    xtype: 'image',
                    scr:'path of image'
                });

where myCarousel is object of carousel.

0

You can try this, this is working for me:

Ext.getStore('Pictures').load(function(pictures) {

        Ext.each(pictures, function(picture) {
            if (picture.get('image')) {
                
                carousel.add({
                        html: '<img style="max-width: 100%; max-height: 100%;" src="' + picture.get('image') + '"/>'
                });
            }
        });
 });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.