Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Aug 2010
    Location
    Europa
    Posts
    216
    Vote Rating
    1
    kortovos is on a distinguished road

      0  

    Default [OPEN-392] 0.96 Carousel broken

    [OPEN-392] 0.96 Carousel broken


    I use a store of 16 records to generate a carousel. In each card of the carousel are an image, a list and several buttons. The content of the list switches depending on which card is shown (filtering). I added a listener to the carousel to register when the card is switched (to update the filtering of the list). But since 0.96 this doesn't register sometimes. Also I added an extra, blank card so that I can switch from the last card generated from the store to the first card. With 0.96 the last card generated from the store doesn't show most of the time.

    Has there been any significant changes to the carousel from 0.95 to 0.96?

  2. #2
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    Thanks for the bug report.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,115
    Vote Rating
    507
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Please post a test case, it's not really possible to comment without it.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    Aug 2010
    Location
    Europa
    Posts
    216
    Vote Rating
    1
    kortovos is on a distinguished road

      0  

    Default


    PHP Code:
    //Inspection page 5
    (function() {
        var 
    cc 1;
        
        function 
    removeFromList(row){
            
    stateStore.removeAt(stateStore.findExact('id',row.get('stateId')));
            
    stateStore.sync();
            
    console.log('state deleted');
            
    inspection.ComponentsDamageStore.remove(row);
        }

        function 
    addDamage(typecomponentaccountable) {
            
    com inspection.ComponentStore.findRecord('id',cc);
            
    check false;
            
    damageStore.each(function(rec){
                    if(
    rec.get('orderid') == selectedCar.get('orderid')){
                        if(
    rec.get('damageId') == com.get('damageId')){
                            
    damage rec;
                            
    check true;
                        }
                    }
            });
            if(
    type == "No Damage"){
                if(
    check == true){
                    
    //remove all other damages to the component
                    
    stateStore.each(function(rec){
                        if(
    rec.get('orderid') ==  selectedCar.get('orderid')){
                            if(
    rec.get('damageId') == damage.get('id')){
                                
    row inspection.ComponentsDamageStore.findRecord('stateId'rec.get('id'));
                                
    inspection.ComponentsDamageStore.remove(row);
                                
    stateStore.remove(rec);
                            }
                        }
                    });
                    
    damageStore.remove(damage);
                    
    stateStore.sync();
                    
    damageStore.sync();
                }
            }else{
                if(
    check == false){
                    
    //new damage
                    
    damageStore.add({
                        
    orderid selectedCar.get('orderid'),
                        
    damageIdcom.get('damageId'),
                        
    description com.get('name')
                    });
                    
    damageStore.sync();
                    
    damage damageStore.getAt(damageStore.getCount() - 1);
                }
                
                if(
    type == "Lost"){
                    
    stateStore.each(function(rec){
                        if(
    rec.get('damageId') == damage.get('id')){
                            
    row inspection.ComponentsDamageStore.findRecord('stateId'rec.get('id'));
                            
    inspection.ComponentsDamageStore.remove(row);
                            
    stateStore.remove(rec);
                        }
                    });
                }

                
    stateStore.add({
                    
    orderid selectedCar.get('orderid'),
                    
    damageIddamage.get('id'),
                    
    typetype,
                    
    accountableaccountable
                
    });
                
    stateStore.sync();
                
                if(
    accountable == true){
                    
    type type ' (A)';
                }else{
                    
    type type ' (NA)';
                }
                
                
    inspection.ComponentsDamageStore.add( {
                    
    componentId component,
                    
    stateId : (stateStore.getAt(stateStore.getCount() - 1)).get('id'),
                    
    typeDamage type,
                    
    severity ''
                
    });
            }
            
    setCarDirty();
        }

        function 
    changePanel(index) {
            
    inspection.ComponentsDamageStore.clearFilter(true);
            
    inspection.ComponentsDamageStore.filter( {
                
    property 'componentId',
                
    value : (index),
                
    exactMatch true,
                
    caseSensitive false
            
    });
            
    cc index;
        }

        function 
    hideImage() {
            if (
    img != undefined && selectedCard == 0) {
                
    img.setSize('0px''0px');
            }
        }

        function 
    showImage() {
            if (
    img == undefined && selectedCard == 0) {
                
    img Ext
                        
    .getBody()
                        .
    createChild(
                                {
                                    
    tag 'img',
                                    
    id 'page5Image',
                                    
    name 'page5Image',
                                    
    src 'resources/img/ubench/carDamage.jpg',
                                    
    style 'width: 504px; height: 360px;position: absolute; top:40px; left:300px;',
                                    
    VISIBILITY 1,
                                    
    DSIPLAY 2
                                
    });

                
    img.on('tap',
                        function(
    e) {
                            
    selectComponent((e.pageX img.getX()), (e.pageY img
                                    
    .getY()));
                        });
            } else if (
    selectedCard == 0) {
                
    img.setSize('504px''360px');
            }
        }

        
    inspection.ComponentStore = new Ext.data.Store( {
            
    model 'BodyworkComponents',
            
    sorters 'id',
            
    getGroupString : function(record) {
                return 
    record.get('name')[0];
            },
            
    data : [ {
                
    name 'Front Panel',
                
    id 1,
                
    image 'resources/img/ubench/car_sections/fr_pn.gif',
                
    0,
                
    0,
                
    width 0,
                
    height 0,
                
    damageId'FRONT'
            
    }, {
                
    name 'Front Bumper',
                
    id 2,
                
    image 'resources/img/ubench/car_sections/fr_bm.gif',
                
    0,
                
    0,
                
    width 0,
                
    height 0,
                
    damageId'FRONT_BUMPER'
            
    }, {
                
    name 'Front Hood',
                
    id 3,
                
    image 'resources/img/ubench/car_sections/fr_hd.gif',
                
    0,
                
    0,
                
    width 0,
                
    height 0,
                
    damageId'FRONT_HOOD'
            
    }]
        });

        
    inspection.ComponentsDamageStore = new Ext.data.Store( {
            
    model 'ComponentsDamage',
            
    sorters 'id',
            
    getGroupString : function(record) {
                return 
    record.get('typeDamage');
            },
            
    data : []
        });

        var 
    img;
        var 
    pict false;
        var 
    selectedCard 0;
        function 
    selectComponent(coorXcoorY) {
            
    console.log(coorX ' ' coorY);
            
    // calculated which part is selected
            
    inspection.page5.setCard(1);
        }

        
    inspection.page5 = new Ext.Carousel(
                {
                    
    style 'background:#F9F9F9',
                    
    id 'inspection.page5',
                    
    indicator false,
                    
    layout : {
                        
    type 'card',
                        
    visible true,
                        
    align 'left'
                    
    },
                    
    listeners : {
                        
    hide : function() {
                            
    hideImage();
                            
    pict true;
                        },
                        
    beforeshow : function() {
                            
    inspection.page5.setCard(0);
                            
    showImage();
                            
    pict false;
                        },
                        
    beforecardswitch : function(carouselnewCardoldCard,
                                
    indexanim) {
                            if (
    cc == 0) {
                                
    hideImage();
                            }
                        },
                        
    cardswitch : function(carouselnewCardoldCardindex,
                                
    anim) {
                            var 
    check false;
                            if (
    index == && (!pict)) {
                                
    inspection.page5.setCard(inspection.ComponentStore.getCount(), {type'slide',direction:'right'});
                                
    check true;
                            }
                            if (
    index inspection.ComponentStore.getCount()) {
                                
    inspection.page5.setCard(1, {type'slide',direction:'left'});
                                
    check true;
                            }
                            
    changePanel(index);
                            if (
    pict) {
                                
    pict == false;
                            }
                            if(
    check){
                                
    //return false;
                            
    }
                        },
                        
    afterrender : function() {
                            
    inspection.ComponentStore
                                    
    .each(function(rec) {
                                        var 
    card = new Ext.Panel(
                                                {
                                                    
    id 'inspection.Component'
                                                            
    rec.get('id'),
                                                    
    layout : {
                                                        
    type 'card'
                                                    
    },
                                                    
    items : [ {
                                                        
    xtype 'panel',
                                                        
    title rec.get('name'),
                                                        
    layout : {
                                                            
    type 'hbox',
                                                            
    align 'left'
                                                        
    },
                                                        
    items : [{
                                                                    
    xtype 'fieldset',
                                                                    
    layout : {
                                                                        
    type 'vbox',
                                                                        
    align 'left'
                                                                    
    },
                                                                    
    width300,
                                                                    
    items : [
                                                                            {
                                                                                
    id 'inspection.Component.Image'rec.get('id'),
                                                                                
    name 'image',
                                                                                
    styleHtmlContent true,
                                                                                
    html '<img name="page5Image'
                                                                                        
    rec.get('id')
                                                                                        + 
    '" src="'
                                                                                        
    rec.get('image')
                                                                                        + 
    '" alt="some_text" width="192", height="64"/> ',
                                                                                
    width 192,
                                                                                
    heigth 64
                                                                            
    },
                                                                            {
                                                                                
    width 300,
                                                                                
    height 600,
                                                                                
    align 'bottom',
                                                                                
    xtype 'list',
                                                                                
    pinHeaders true,
                                                                                
    deferEmptyText true,
                                                                                
    id 'inspection.ComponentsDamageList'rec.get('id'),
                                                                                
    listeners : {
                                                                                    
    itemtap : function(view,index,row,e) {
                                                                                         
    removeFromList(this.getRecord(row));
                                                                                    }
                                                                                },

                                                                                
    loadingText 'Loading',
                                                                                
    store inspection.ComponentsDamageStore,
                                                                                
    tpl '<tpl for="."><div class="damage"><strong>{typeDamage}</strong></div></tpl>',
                                                                                
    itemSelector 'div.damage',
                                                                                
    singleSelect true,
                                                                                
    grouped false,
                                                                                
    indexBar false
                                                                            
    } ]
                                                                },
                                                                {
                                                                    
    xtype 'panel',
                                                                    
    layout : {
                                                                        
    type 'hbox',
                                                                        
    align 'left'
                                                                    
    },
                                                                    
    width 500,
                                                                    
    items : [{
                                                                                
    xtype 'fieldset',
                                                                                
    layout : {
                                                                                    
    type 'vbox',
                                                                                    
    align 'left'
                                                                                
    },
                                                                                
    width220,
                                                                                
    title 'Register damage - Accountable',
                                                                                
    defaults : {
                                                                                    
    xtype 'button',
                                                                                    
    cls 'demobtn',
                                                                                    
    ui 'decline-round',
                                                                                    
    width180,
                                                                                    
    height55,
                                                                                    
    layout:{
                                                                                        
    align'left'
                                                                                    
    },
                                                                                    
    listeners : {
                                                                                        
    tap : function(but,e) {
                                                                                            
    addDamage(but.getText(),(cc),true);
                                                                                        }
                                                                                    }
                                                                                },
                                                                                
    items : [
                                                                                        {
                                                                                            
    text 'Dent'
                                                                                        
    },
                                                                                        {
                                                                                            
    text 'Scratch'
                                                                                        
    },
                                                                                        {
                                                                                            
    text 'Multiple Damage'
                                                                                        
    },
                                                                                        {
                                                                                            
    text 'Lost'
                                                                                        
    },
                                                                                        {
                                                                                            
    text 'No Damage'
                                                                                        
    } ]
                                                                            }, {
                                                                                
    xtype 'fieldset',
                                                                                
    layout : {
                                                                                    
    type 'vbox',
                                                                                    
    align 'right'
                                                                                
    },
                                                                                
    width220,
                                                                                
    title 'Register damage - Not Accountable',
                                                                                
    defaults : {
                                                                                    
    xtype 'button',
                                                                                    
    cls 'demobtn',
                                                                                    
    ui 'round',
                                                                                    
    width180,
                                                                                    
    height55,
                                                                                    
    layout:{
                                                                                        
    align'right'
                                                                                    
    },
                                                                                    
    listeners : {
                                                                                        
    tap : function(
                                                                                                
    but,
                                                                                                
    e) {
                                                                                            
    addDamage(
                                                                                                    
    but
                                                                                                            
    .getText(),
                                                                                                    (
    cc),false);
                                                                                        }
                                                                                    }
                                                                                },
                                                                                
    items : [
                                                                                        {
                                                                                            
    text 'Dent'
                                                                                        
    },
                                                                                        {
                                                                                            
    text 'Scratch'
                                                                                        
    },
                                                                                        {
                                                                                            
    text 'Multiple Damage'
                                                                                        
    },
                                                                                        {
                                                                                            
    text 'Lost'
                                                                                        
    }]
                                                                            }]
                                                                } ]
                                                    } ]
                                                });
                                        
    Ext.getCmp('inspection.page5').add(card);
                                    });
                            
    card = new Ext.Panel( {
                                
    id 'inspection.ComponentLast',
                                
    layout : {
                                    
    type 'card'
                                
    }
                            });
                            
    Ext.getCmp('inspection.page5').add(card);
                            
    Ext.getCmp('inspection.page5').doLayout();
                            
    changePanel(cc 1);
                        }
                    },
                    
    items : [ {
                        
    xtype 'panel',
                        
    id 'page5Panel1',
                        
    index 0,
                        
    visible true,
                        
    //autoHeight : true,
                        
    items : [ {
                            
    xtype 'component',
                            
    style 'width: 504px; height: 360px;',
                            
    listeners : {
                                
    afterrender : function() {

                                }
                            }
                        } ]
                    } ]
                }); 
    The idea behind the carousel is to provide the user with an interface with which he can register damage to parts of a car (1.jpg). I have added an empty card in the end (for an loop in the carousel). First the user gets an image of a car (eventually the idea is the user can tap an area on the image, and that the app will calculate which part the user tapped). Then he gets a carousel, with a card for each part. For each part he can register the kind of damage, which is added to the list (2.jpg and 3.jpg). But the list filters based on which card/part is shown (cardswitch listener). Now the carousel sometimes doesn't register when cards are switched. Also the carousel switches cards sometimes with a single tap, not with a swipe. And finally, the last part isn't shown sometimes (just blank).

    Could all this be caused that the carousel hasn't been fully constructed when I start using it?
    Attached Images

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,115
    Vote Rating
    507
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's difficult to say from that, there's a lot of code there. I'd suggest trying to distil it down to only the essential bits.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha User
    Join Date
    Aug 2010
    Location
    Europa
    Posts
    216
    Vote Rating
    1
    kortovos is on a distinguished road

      0  

    Default


    Is this short enough?

    PHP Code:
    //Inspection page 5
    (function() {
        var 
    cc 1;
        var 
    img;
        var 
    pict false;
        var 
    selectedCard 0;
        
      function 
    selectComponent(coorXcoorY) {
            
    console.log(coorX ' ' coorY);
            
    // calculated which part is selected
            
    inspection.page5.setCard(1);
        }

        function 
    changePanel(index) {
            
    inspection.ComponentsDamageStore.clearFilter(true);
            
    inspection.ComponentsDamageStore.filter( {
                
    property 'componentId',
                
    value : (index),
                
    exactMatch true,
                
    caseSensitive false
            
    });
            
    cc index;
        }


        
    inspection.ComponentStore = new Ext.data.Store( {
            
    model 'BodyworkComponents',
            
    sorters 'id',
            
    getGroupString : function(record) {
                return 
    record.get('name')[0];
            },
            
    data : [ {
                
    name 'Front Panel',
                
    id 1,
                
    image 'resources/img/ubench/car_sections/fr_pn.gif',
                
    0,
                
    0,
                
    width 0,
                
    height 0,
                
    damageId'FRONT'
            
    }, {
                
    name 'Front Bumper',
                
    id 2,
                
    image 'resources/img/ubench/car_sections/fr_bm.gif',
                
    0,
                
    0,
                
    width 0,
                
    height 0,
                
    damageId'FRONT_BUMPER'
            
    }, {
                
    name 'Front Hood',
                
    id 3,
                
    image 'resources/img/ubench/car_sections/fr_hd.gif',
                
    0,
                
    0,
                
    width 0,
                
    height 0,
                
    damageId'FRONT_HOOD'
            
    }]
        });

        
    inspection.ComponentsDamageStore = new Ext.data.Store( {
            
    model 'ComponentsDamage',
            
    sorters 'id',
            
    getGroupString : function(record) {
                return 
    record.get('typeDamage');
            },
            
    data : []
        });

        
    inspection.page5 = new Ext.Carousel(
                {
                    
    id 'inspection.page5',
                    
    indicator false,
                    
    layout : {
                        
    type 'card',
                        
    visible true,
                        
    align 'left'
                    
    },
                    
    listeners : {
                        
    hide : function() {
                            
    hideImage();
                            
    pict true;
                        },
                        
    beforeshow : function() {
                            
    inspection.page5.setCard(0);
                            
    showImage();
                            
    pict false;
                        },
                        
    beforecardswitch : function(carouselnewCardoldCard,
                                
    indexanim) {
                            if (
    cc == 0) {
                                
    hideImage();
                            }
                        },
                        
    cardswitch : function(carouselnewCardoldCardindex,
                                
    anim) {
                            var 
    check false;
                            if (
    index == && (!pict)) {
                                
    inspection.page5.setCard(inspection.ComponentStore.getCount(), {type'slide',direction:'right'});
                                
    check true;
                            }
                            if (
    index inspection.ComponentStore.getCount()) {
                                
    inspection.page5.setCard(1, {type'slide',direction:'left'});
                                
    check true;
                            }
                            
    changePanel(index);
                            if (
    pict) {
                                
    pict == false;
                            }
                        },
                        
    afterrender : function() {
                            
    inspection.ComponentStore
                                    
    .each(function(rec) {
                                        var 
    card = new Ext.Panel(
                                                {
    id 'inspection.Component'
                                                            
    rec.get('id'),
                                                    
    layout : {
                                                        
    type 'card'
                                                    
    },
                                                    
    items : [ {
                                                        
    xtype 'panel',
                                                        
    title rec.get('name'),
                                                        
    layout : {
                                                            
    type 'hbox',
                                                            
    align 'left'
                                                        
    },
                                                        
    items : [{
                                                                    
    xtype 'fieldset',
                                                                    
    layout : {
                                                                        
    type 'vbox',
                                                                        
    align 'left'
                                                                    
    },
                                                                    
    width300,
                                                                    
    items : [
                                                                            {
                                                                                
    id 'inspection.Component.Image'rec.get('id'),
                                                                                
    name 'image',
                                                                                
    styleHtmlContent true,
                                                                                
    html '<img name="page5Image'rec.get('id')+ '" src="'rec.get('image')+ '" alt="some_text" width="192", height="64"/> ',
                                                                                
    width 192,
                                                                                
    heigth 64
                                                                            
    },
                                                                            {
                                                                                
    width 300,
                                                                                
    height 600,
                                                                                
    align 'bottom',
                                                                                
    xtype 'list',
                                                                                
    pinHeaders true,
                                                                                
    deferEmptyText true,
                                                                                
    id 'inspection.ComponentsDamageList'rec.get('id'),
                                                                                
    listeners : {
                                                                                    
    itemtap : function(view,index,row,e) {
                                                                                         
    removeFromList(this.getRecord(row));
                                                                                    }
                                                                                },
                                                                                
    loadingText 'Loading',
                                                                                
    store inspection.ComponentsDamageStore,
                                                                                
    tpl '<tpl for="."><div class="damage"><strong>{typeDamage}</strong></div></tpl>',
                                                                                
    itemSelector 'div.damage',
                                                                                
    singleSelect true,
                                                                                
    grouped false,
                                                                                
    indexBar false
                                                                            
    } ]
                                                                }]
                                                           }]
                                                    } ]
                                                });
                                        
    Ext.getCmp('inspection.page5').add(card);
                                    });
                            
    card = new Ext.Panel( {
                                
    id 'inspection.ComponentLast',
                                
    layout : {
                                    
    type 'card'
                                
    }
                            });
                            
    Ext.getCmp('inspection.page5').add(card);
                            
    Ext.getCmp('inspection.page5').doLayout();
                            
    changePanel(cc 1);
                        }
                    },
                    
    items : [ {
                        
    xtype 'panel',
                        
    id 'page5Panel1',
                        
    index 0,
                        
    visible true,
                        
    items : [ {
                            
    xtype 'component',
                            
    style 'width: 504px; height: 360px;'
                        
    } ]
                    } ]
                }); 

  7. #7
    Ext User
    Join Date
    Sep 2010
    Posts
    25
    Vote Rating
    0
    neural is on a distinguished road

      0  

    Default


    My carousel also broke when moving to .96, reverted back to .93 for now.

Similar Threads

  1. [OPEN-327] List with carousel
    By gmanraj in forum Sencha Touch 1.x: Bugs
    Replies: 8
    Last Post: 29 Nov 2010, 8:22 PM
  2. [FIXED-377] 0.96 Carousel switching sections bug
    By krzepa in forum Sencha Touch 1.x: Bugs
    Replies: 1
    Last Post: 1 Oct 2010, 10:43 AM
  3. [OPEN-1285] Vertical slider broken
    By steffenk in forum Ext 3.x: Bugs
    Replies: 2
    Last Post: 21 Sep 2010, 8:39 AM
  4. Replies: 7
    Last Post: 16 Dec 2009, 8:49 PM
  5. [OPEN-307]Dynamic localization example is broken
    By stephen.friedrich in forum Ext 3.x: Bugs
    Replies: 3
    Last Post: 30 Sep 2009, 5:15 AM

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar