1. #1
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Question Question to Cards of Kitchen Sink/ Events Example

    Question to Cards of Kitchen Sink/ Events Example


    Hello everybody,

    you have the Example Events in your Kitchen Sink.
    When I klick first time on Events it shows me on iPhone the card infoCard first. When i click on its Button Console, the second card, the touchCard with its items is shown. Everything is fine, but when I go back to Events an try it again, the first card infoCard will be skipped. What should I change in order to avoid this?

    PHP Code:
    demos.TouchImpl Ext.extend(Ext.Panel, {
        
    initComponent : function() {
            
    this.logger = new Ext.Panel({
                
    id'logger',
                
    scroll'vertical',
                
    styleHtmlContenttrue,
                
    dockedItems: [{
                    
    dock'top',
                    
    xtype'toolbar',
                    
    title'Event Log',
                    
    ui'metal'
                
    }],
                
    html'<span>Try using gestures on the area to the right to see how events are fired.</span>'
            
    });
            
            
    this.info = new Ext.Component({
                
    xtype'component',
                
    styleHtmlContenttrue,
                
    scroll'vertical',
                
    html'<p>Sencha Touch comes with a multitude of touch events available on components. Included touch events that can be used are:</p><ul><li>touchstart</li><li>touchmove</li><li>touchend</li><li>scrollstart</li><li>scroll</li><li>scrollend</li><li>tap</li><li>doubletap</li><li>taphold</li><li>swipe</li><li>pinch</li></ul>'
            
    });
            
            
    this.touchPad = new demos.TouchImpl.TouchPad({
                
    listeners: {
                    
    logthis.onLog,
                    
    scopethis
                
    }
            });
            
            if (!
    Ext.platform.isPhone) {
                
    this.layout 'fit';
                
    this.logger.flex 1;
                
    this.info.flex 1.5;
                
                
    this.dockedItems = [{
                    
    dock'left',
                    
    width250,
                    
    id'touchinfopanel',
                    
    layout: {
                        
    type'vbox',
                        
    align'stretch'
                    
    },
                    
    items: [this.infothis.logger]
                }];  
                
    this.items = [this.touchPad];
            }
            else {
                
    this.layout 'card';
                
    this.logger.flex 1;
                
    this.touchPad.flex 1;
                
                
    this.infoCard = new Ext.Container({
                    
    scroll'vertical',
                    
    items: [{
                        
    xtype'button',
                        
    ui'action',
                        
    text'Console',
                        
    style'margin: 10px;',
                        
    handlerthis.onConsoleButtonTap,
                        
    scopethis
                    
    }, {
                        
    xtype'component',
                        
    styleHtmlContenttrue,
                        
    html'<p>Sencha Touch comes with a multitude of touch events available on components. Included touch events that can be used are:</p><ul><li>touchstart</li><li>touchmove</li><li>touchend</li><li>scrollstart</li><li>scroll</li><li>scrollend</li><li>tap</li><li>doubletap</li><li>taphold</li><li>swipe</li><li>pinch</li></ul>'
                    
    }]                
                });
                
                
    this.touchCard = new Ext.Container({
                    
    layout: {
                        
    type'vbox',
                        
    align'stretch'
                    
    },
                    
    items: [this.touchPadthis.logger]
                });
                
                
    this.items = [this.infoCardthis.touchCard];
            }     
            
            
    demos.TouchImpl.superclass.initComponent.call(this);
        },
        
        
    onConsoleButtonTap : function() {
            
    this.setCard(this.touchCard'slide');
        },
        
        
    onLog : function(typee) {
            var 
    loggerEl this.logger.body;
            if (!
    this.started) {
                
    loggerEl.select('span').remove();
                
    this.started true;
            }

            switch (
    type) {
                default:
                    
    loggerEl.first().insertFirst({
                        
    tag'p',
                        
    htmltype,
                        
    style'margin: 0'
                    
    });
                    
    loggerEl.select('p:nth-child(50)').remove();
                break;
            }
        }
    });

    demos.TouchImpl.TouchPad Ext.extend(Ext.Component, {
        
    id'touchpad',
        
    html'Touch here!',
        
        
    initComponent : function() {
            
    this.addEvents('log');
            
    demos.TouchImpl.TouchPad.superclass.initComponent.call(this);
        },
        
        
    afterRender: function() {
            
    demos.TouchImpl.TouchPad.superclass.afterRender.call(this);
            
            
    this.mon(this.el, {
                
    touchstartthis.handleEvent,
                
    touchendthis.handleEvent,
                
    touchmovethis.handleEvent,
                
    scrollstartthis.handleEvent,
                
    scrollthis.handleEvent,
                
    scrollendthis.handleEvent,
                
    tapthis.handleEvent,
                
    doubletapthis.handleEvent,
                
    tapholdthis.handleEvent,
                
    tapcancelthis.handleEvent,
                
    swipethis.handleEvent,
                
    pinchthis.handleEvent,
                
    scopethis
            
    });
        },

        
    handleEvent: function(e) {
            
    this.fireEvent('log'e.typee);
        }
    });

    demos.Touch = new demos.TouchImpl(); 
    Every answer will be apreciated, THX
    Marius
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  2. #2
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    Hello Forum,

    maybe somebody has changed this in the mean time and have an asnwer for my question, THX.

    Marius
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  3. #3
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Default


    it's not 'skipping' the first card, it's remembering where you were when you left the carousel page.

    For many people this is what you want, not always having to revisit the first card. For others, having it automatically return to the beginning may be required. For others a popup allowing them to choose beginning or where they left off may be necessary.

    You can do a search in the forum for how to set the active item for the carousel so it starts on a particular slide. try this post for a possible answer:

    http://www.sencha.com/forum/showthre...light=carousel

Similar Threads

  1. [FIXED-99] Rotating iPhone breaks kitchen sink example.
    By DustinHES in forum Sencha Touch 1.x: Bugs
    Replies: 11
    Last Post: 29 Jul 2010, 9:37 AM
  2. [.8 -- iPhone] Kitchen Sink example - All ssyptes of layout issues
    By jay@moduscreate.com in forum Sencha Touch 1.x: Bugs
    Replies: 1
    Last Post: 19 May 2010, 9:58 AM
  3. TextField does not sink Event.ONCHANGE
    By mbellew in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 6 May 2010, 11:42 AM
  4. Replies: 2
    Last Post: 28 May 2009, 1:14 PM

Thread Participants: 1

Tags for this Thread