Results 1 to 5 of 5

Thread: Dynamic nested carousel problem

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1684 in a recent build.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    5

    Question Dynamic nested carousel problem

    Hey there!

    Start tinkering with Sencha Touch!
    Did a quick test by creating a "dynamic" carousel nested in another.
    However I hit a bump in the road and I'm not 100% sure if either I'm doing something wrong or if there's a bug in the library.


    Sencha Touch version used: 2.0.0-pr4

    Live test case:
    http://onnoschwanen.com/prototypes/s...rousel/tryout/

    Steps to reproduce problem:
    1. Click on Category 1
    2. Slide back up to the view with the 2 links
    3. Click on Category 2
    4. Slide back up to the view with the 2 links
    5. Click on Category 1

    Now you'd expect it to slide down, however it throws the following Error in the Dev Tools console:

    Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
    /prototypes/sencha-touch-carousel/libs/sencha-touch/src/Decorator.js:125

    Note: Clicking on Category 1 once more after step 5 produces the correct result.

    Code:
    // to access from console
    var outerCarousel, innerCarousel;
    
    
    Ext.application({
        name: 'Proto',
    
    
        launch: function() {
    
    
            outerCarousel = Ext.create('Ext.Carousel', {
                fullscreen: false,
                direction: 'vertical',
                // disabled: true,
                // scrollable: false,
                items: [{
                    // dock: 'top',
                    style: 'background-color: #abe7b3; color: white;',
                    title: 'home',
                    html: '<ul id="nav">'+
                        '<li><a href="#" id="cat1">Category 1</a></li>' +
                        '<li><a href="#" id="cat2">Category 2</a></li>' +
                    '</ul>'
                }]
            });
    
    
            var nav = Ext.get("nav");
    
    
            nav.on('tap', function(event, target) {
    
    
                console.log('************** TAP ****************');
                console.log('innerCarousel', innerCarousel);
                console.log('event:', event);
                console.log('target.id:', target.id);
    
    
                if(innerCarousel===undefined) {
                    outerCarousel.add( innerCarousel = Ext.create('Ext.Carousel', {
                        direction: 'horizontal',
                        directionLock: true
                    }));
                }else{
                    innerCarousel.removeAll();
                    // console.log('count after removeAll():', innerCarousel.innerItems.length );
                }
    
    
                switch(target.id) {
                    case 'cat1':
                        innerCarousel.add({
                            style: 'background-color: #96d3d7; color: white;',
                            html: 'category 1'
                        });
                    break;
                    case 'cat2':
                        innerCarousel.add({
                            style: 'background-color: #ed747b; color: white;',
                            html: 'category 2'
                        });
                    break;
                    default:
                    break;
                }
    
    
                innerCarousel.setActiveItem(0);
                // outerCarousel.setActiveItem(1);
                outerCarousel.next();
    
    
            });
        }
    });

  2. #2
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    This looks like a bug. It is trying to reference a DOM node which doesn't exist (probably because it has been removed).

    Could you provide us with a simpler testcase which we can debug please, or at least provide the complete source?

    Thanks.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    5

    Default

    Thanks for the reply.

    Source files: http://www.onnoschwanen.com/download...uch-tryout.zip

    OS: Mac OSX 10.6.8
    Browser: Google Chrome 16.0.912.77
    Doctype: HTML5 Doctype declaration

    Noticed that the doUnsetComponent method in the Decorator.js file gets called twice in step 5.
    Seems odd while there's only one item at a time in the innerCarousel.
    If you'd like I'll report it as a bug in the Bug section following the proper structure.

  4. #4
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    I've just tested your example with our internal build and it is now working. And you shouldn't have to wait much longer for it..

    Thanks!
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    5

    Default

    That's great news, look forward working with it!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •