1. #1
    Ext User
    Join Date
    Mar 2010
    Posts
    20
    Vote Rating
    0
    freshface is on a distinguished road

      0  

    Default Doubletap on panel

    Doubletap on panel


    How can i register a toubletap on a panel?
    I want to toubletap on a panel and show via a cube effect an other panel with a back button.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,170
    Vote Rating
    674
    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


    Code:
    new Ext.Panel({
        listeners: {
            afterrender: function(c){
                c.body.on('tap', ....);
            }
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Mar 2010
    Posts
    20
    Vote Rating
    0
    freshface is on a distinguished road

      0  

    Default


    Thx that worked.
    But how about the transition between 2 panels.

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
            // Create a Carousel of Items
    
    		//console.log('onready');
    		
            var chapter1 = new Ext.Carousel({
    	 		direction: 'horizontal',
                defaults: {
                    cls: 'card'
                },
                items: [{
                    html: '<img src="pages/ipad-testneorauch_Page_1.jpg" width="100%" height="100%" />'
                },
                {
                    html: '<img src="pages/ipad-testneorauch_Page_2.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_3.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_4.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_5.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_6.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_7.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_8.jpg" width="100%" height="100%" />'
                }]
            });
    		
    		
    		var chapter2 = new Ext.Carousel({
    	 		direction: 'horizontal',
                defaults: {
                    cls: 'card'
                },
                items: [{
                    html: '<img src="pages/ipad-testneorauch_Page_1.jpg" width="100%" height="100%" />'
                },
                {
                    html: '<img src="pages/ipad-testneorauch_Page_2.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_3.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_4.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_5.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_6.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_7.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_8.jpg" width="100%" height="100%" />'
                }]
            });
    		
    		var chapter3 = new Ext.Carousel({
    	 		direction: 'horizontal',
                defaults: {
                    cls: 'card'
                },
                items: [{
                    html: '<img src="pages/ipad-testneorauch_Page_1.jpg" width="100%" height="100%" />'
                },
                {
                    html: '<img src="pages/ipad-testneorauch_Page_2.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_3.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_4.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_5.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_6.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_7.jpg" width="100%" height="100%" />'
                }
    			,
                {
                    html: '<img src="pages/ipad-testneorauch_Page_8.jpg" width="100%" height="100%" />'
                }]
            });
    		
    		
            var horizontalCarousel = new Ext.Carousel({
    			direction: 'vertical',
                ui: 'light',
                activeItem: 0,
                defaults: {
                    cls: 'card'
                },
    
                items: [chapter1,chapter2,chapter3]
            });
    
    
    		var items = [];
            // Change these to image names
            var icons = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7', 'test8', 'test9'];
            for (var i = 0; i < icons.length; ++i) {
                items.push({
                    html: '<img src="pages/ipad-testneorauch_Page_8.jpg" height="150" />',
                    style: 'padding: 0 1px',
                });
            }
            
            var thumbs = new Ext.Panel({
                fullscreen: false,
    			style: {
    			                 width: '50%',
    			                 marginBottom: '10px'
    			             },
                scroll: 'horizontal',
                layout: {
                    type: 'hbox'
                },
                items: items
            });
    
    	 var toolbar = new Ext.Toolbar({
    	            dock: 'top',
    	            items: {
    	                text: 'Foo'
    	            }
    	        });
    	
            var main = new Ext.Panel({
                fullscreen: true,
                layout: {
                    type: 'card',
                    align: 'stretch'
                },
    		 	listeners: {            
    			render: function(c){
    				c.body.on('doubletap', function(e, t)
    				{
    					//main.hide();
    					main.setCard(1,'cube'); // transition between 2 panels
    	                main.doLayout()
    				}, c);
    			}
    		},
    			/*
    			dockedItems: [{
    				height:150,
    		        xtype: 'toolbar',
    		        dock: 'bottom',
    		        items: [thumbNavigation]
    		    }],
    		*/
                defaults: {
                    flex: 1
                },
                items: [horizontalCarousel,thumbs]
            });
    		
    
    		
        }
    });

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,170
    Vote Rating
    674
    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


    Code:
    Ext.setup({
        onReady: function(){
            var main = new Ext.Panel({
                fullscreen: true,
                layout: 'card',
                items: [{
                    html: 'Item 1',
                    listeners: {
                        afterrender: function(c){
                            c.body.on('doubletap', function(){
                                main.setCard(1, 'cube'); 
                            });
                        }
                    }
                },{
                    html: 'Item 2',
                    dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [{
                            text: 'Back',
                            ui: 'back',
                            handler: function(){
                                main.setCard(0, 'cube');
                            }
                        }]
                    }]
                }]
            });
        }
    });
    Also, might want to change your code to use a loop, since you have around 75 lines you could compress down to about 10, since you've just copy/pasted it.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. Tap, doubletap & taphold on one component
    By tobinharris in forum Sencha Touch 1.x: Discussion
    Replies: 9
    Last Post: 13 Jun 2014, 5:53 AM
  2. Replies: 3
    Last Post: 8 Sep 2010, 4:13 PM
  3. Tap and Doubletap on List object
    By stefx in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 23 Aug 2010, 1:20 AM
  4. [FIXED-22] doubletap event on Dataview isn't called (0.82)
    By rdougan in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 14 Aug 2010, 7:10 AM
  5. With the doubletap, will tap always be called, or is that a bug?
    By rdougan in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 6 Aug 2010, 9:55 PM

Thread Participants: 1

Tags for this Thread