Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    gnmcvey is on a distinguished road

      0  

    Default Answered: Display Carousel when itemTap pressed in docked List.

    Answered: Display Carousel when itemTap pressed in docked List.


    I have a list docked the left hand side of the panel. When tapping on any item on this list a new card is displayed on the right hand panel.

    Instead of a new card I want to display a carousel instead. Basically associating one carousel to each item on the list.

    Do I do this through a store or what? I'm also quite new to Sencha Touch 2 so be nice.

  2. Sorry, I should've posted the code yesterday. I forgot to mention that you need to put 'fullscreen: true' config inside your Services view.

    Here's a working code.
    http://www.senchafiddle.com/#vKXIu

    Quote Originally Posted by gnmcvey View Post
    Where else would you recommend to start learning about Sencha Touch?
    I'm a noob to ST as well. Just started about 4-5 weeks ago. Unfortunately there's no book out on the subject (aside from miamicoder), so I just learn from examples, google, and asking on the forum. And of course lot's of experimentation, trial and error, etc.

    Couple of links I have on ST:

    http://techtalktone.wordpress.com/category/tech/mobile/

    Styling UI

    http://senchaexamples.com/

    Animations with ST

    Layout out components

    Data driven image carousel

  3. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    gnmcvey is on a distinguished road

      0  

    Default OK so here's the code.

    OK so here's the code.


    Controller:
    Code:
    Ext.define('App.controller.services-controller',{    
    	extend:'Ext.app.Controller',
        config:{
            refs:{
                leftList:'mypanel list[id=List]',
                myPanel:'mypanel panel[id=mypanel]'
            },
            control:{
                leftList:{
                    itemtap:'onItemTap'
                }
            }
        },
        
        onItemTap:function(list, index, item, record, e , opts)
        {
            var content = '<h2>' + record.get('label') +'</h2>' + record.get('html');
            this.getMyPanel().setHtml( content );
        }
        
    });
    Model:
    Code:
    Ext.define('App.model.Services-model', {
        extend: 'Ext.data.Model',
        config:{
            fields: ['label','html']
        }
    });
    Store:
    Code:
    Ext.define('App.store.Services-store',{
        extend: 'Ext.data.Store', 
        config:{
            model: 'App.model.Services-model',
            storeId:'List',
            data:[
                {label:'item 1', html:'desc 1'},
                {label:'item 2', html:'desc 2'},
                {label:'item 3', html:'desc 3'},
            ]
        }
    });
    View:
    Code:
    Ext.define('App.view.Services',{
    	   	extend: 'Ext.Panel',
    	    xtype:'mypanel',
    		requires: [	'Ext.dataview.List',
    					'Ext.data.Store'
    					],
    	    config: {
    			title: 'Services',
    			iconCls: 'star',
    	        layout: {
    	            type: 'card'
    	        },
    	        items: [
    	            {
    	                xtype: 'titlebar',
    	                docked: 'top',
    	                title: 'Services',
    	                items: [
    	                    {
    	                        xtype: 'button',
    	                        docked: 'right',
    	                        hidden: true,
    	                        ui: 'back',
    	                        text: 'back'
    	                    }
    	                ]
    	            },
    	            {
    	                xtype: 'list',
    	                docked: 'left',
    	                id: 'List',
    	                width: '200px',
    	                itemTpl: [
    	                    '<div>{label}</div>'
    	                ],
    	                store: 'List',
    	                items: [
    	                    {
    	                        xtype: 'titlebar',
    	                        docked: 'top',
    	                        title: 'List'
    	                    }
    	                ]
    	            },
    	            {
    	                xtype: 'panel',
    	                styleHtmlContent: true,
    	                id:'mypanel',
    	            }
    	        ]
    	    }
    
    
    	});
    It works correctly so that when "item 1" is tapped, the panel to the right displays "desc 1".

    What i want is for "desc 1" to be replaced with a Carousel that has multiple slides.

    And I've no idea how to do this so any help would be massively appreciated.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    If I see this correctly, your problem here is that you don't have any card items in your right panel that you switch between.

    It seems what you are doing is:
    1. You create a main panel and assign a card layout to it.
    2. You dock a toolbar to the top
    3. You dock a list to the left
    4. You add a single panel to the rest of the layout.

    So you said "When tapping on any item on this list a new card is displayed on the right hand panel." This is actually incorrect. You are not displaying a new card. You simply changing the html content of a single card item.

    In order to display an actual new card, you'd have to have multiple cards in your layout and then when you tap an item in the list, you'd have to use 'animateActiveItem' or 'setActiveItem' on the container on the right. And that right container has to have a card layout.

    So for the current example, 'App.view.Services' does not have to have a card layout. The panel with the id 'mypanel' should have a card layout (and that doesn't have to be a panel, that can be a simple container), and you'd add multiple containers to it. So you'd end up with (inside your 'App.view.Services' panel) a toolbar docked at the top, a list docked at the left, and a container on the right using a card layout and having multiple containers. When you select an item from the list, then you'd animate to a different card inside your 'mypanel' container (the one using the card layout).

    To change all this to a carousel, you'd keep the toolbar at the top and the list on the left inside your main panel. The container on the right would have a card layout with multiple carousels in it.

    So...

    1. App.view.Services would have a default or 'fit' layout (don't have to be card)
    2. Dock the toolbar at the top
    3. Dock the list at the left
    4. Create a container (having a card layout) which would be on the right (eg fill the rest of the layout)
    5. Create as many carousels as you want, and add them each to this container ('mypanel')
    6. When you tap and item on the list, use 'animateActiveItem' on the container on the right, to switch out the card to a different one, thereby revealing a different carousel inside it.

  5. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    gnmcvey is on a distinguished road

      0  

    Default Thank you for the Clarity.

    Thank you for the Clarity.


    Will definitely be giving this a go. But with my currently beginner/average knowledge I may be back to ask some more questions.

    I was thinking, the Kitchen Sink app is precisely what I wish to emulate.
    Using the docked list to the left to select what is displayed on the right hand side of the screen. And as with the kitchen sink there is a lot that can be changed on the right hand side by way of selecting list items on the docked left hand list.

    Cheers

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    gnmcvey is on a distinguished road

      0  

    Default Still Stuck With This!

    Still Stuck With This!


    Ok so here's the update.

    Controller
    Code:
         
    Ext.define('MyApp.controller.services-controller',{    
        extend:'Ext.app.Controller',
        config:{
            refs:{
                leftList:'mypanel list[id=List]',
                myPanel:'mypanel panel[id=mypanel]'
            },
            control:{
                leftList:{
                    itemtap:'onItemTap'
                    }    
                }
            },
        
         onItemTap:function(list, index, item, record, e , opts)
            {
                var content = record.get('activeItem');
                this.getMyPanel().animateActiveItem( content );
            }
    });
    Model:
    Code:
    Ext.define('MyApp.model.Services-model', {
        extend: 'Ext.data.Model',
        config:{
            fields: ['label','html','activeItem']
        }
    });
    Store:
    Code:
    Ext.define('MyApp.store.Services-store',{
        extend: 'Ext.data.Store', 
        config:{
            model: 'MyApp.model.Services-model',
            storeId:'List',
            data:[
                {label:'Item 1', html:'1', activeItem:'1'},
                {label:'Item 2', html:'2', activeItem:'2'},
            ]
        }
    });
    View:
    Code:
    Ext.define('MyApp.view.Services',{    extend: 'Ext.Panel',
        xtype:'mypanel',
        requires: [    'Ext.dataview.List',
                    'Ext.data.Store'
                    ],
        config: {
            title: 'Services',
            iconCls: 'star',
            items:[
                 {
                    xtype: 'titlebar',
                    docked: 'top',
                    title: 'Services',
                    items: [
                        {
                            xtype: 'button',
                            docked: 'right',
                            hidden: true,
                            ui: 'back',
                            text: 'back'
                        }
                    ]
                },
                {
                    xtype: 'list',
                    docked: 'left',
                    id: 'List',
                    width: '200px',
                    itemTpl: [
                        '<div>{label}</div>'
                    ],
                    store: 'List',
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            title: 'List'
                        }
                    ]
                },{
                    xtype: 'container',
                    title: 'Services',
                    id: 'mypanel',
                    layout: 'card',
                    items: [{
                        xtype: 'carousel',
                        items:[{
                            html: 'Panel 1'
                        },{
                            html: 'Panel 2'
                        }]
                    },{
                        xtype: 'carousel',
                        items: [{
                            html: 'Panel 1'
                        },{
                            html: 'Panel 2'
                        }]
                    }
                    
                    ]
                }
            ]}
    
    
    });
    The current error message I'm getting is:

    Uncaught TypeError: Cannot call method 'animateActiveItem' of undefined

    Which to me means nothing but it points to the following as the source of the error.

    this.getMyPanel().animateActiveItem( content );


    If I remove the Carousels from the View and tweak the onItemTap to point to values from the data store, it works and new Cards are generated.

    I'm just a bit nonplussed as to where to put the Carousels and also how to call them. I've also spent hours experimenting with the setActiveItem and animateActiveItem functions but nothing seems to work.

    I apologise for just how much of a noob I am but it can't be helped.
    Any help/solutions at this point would be an absolute godsend.


    Kind Regards

  7. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    Three things.

    First, in your store (Services-store) you declare 'activeItem' as a string (eg activeItem: '1'). That should be a number, because when you pass this value to 'animateActiveItem', that function expects a number not a string. So your declaration in the store should be: activeItem: 1 (no quotes around 1).

    Second, your items are zero based, so your first 'activeItem' should be 0 (in your store).

    And third, the reason you get that error is because you need to pass an animation object. So for example
    Code:
    this.getMyPanel().animateActiveItem(content, {type: 'slide', direction: 'down', duration: 500, easing: 'ease-out'});
    And I forgot a fourth one... :-)

    In your controller file, under the 'refs' section, it should be:
    Code:
    myPanel: 'mypanel container[id=mypanel]'
    and not
    Code:
    myPanel: 'mypanel panel[id=mypanel]'
    since you declare this item as "xtype: container" and not "xtype: panel"


    PS: If you haven't seen it yet, check out this book: http://miamicoder.com/sencha-touch-book/

  8. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    gnmcvey is on a distinguished road

      0  

    Default Getting Closer.

    Getting Closer.


    Ok so I made all the changes you suggested, they all made sense and I could have kicked myself for not spotting the 0/1/2 progression for activeItem.

    I checked out animateActiveItem in the docs as well and I'm sure I have it right. Because the 'var content' draws the number from 'activeItem' in the store and that is just a number. So in theory when called the full line should be:

    Code:
    this.getMyPanel().animateActiveItem(0, {type: 'slide', direction: 'down', duration: 500, easing: 'ease-out'});
    I've also tried this with just setActiveItem(content) but that hasn't worked either.

    The error I'm getting at the minute though is that the right panel doesn't show anything with a layout:'card' attached to it. If I don't assign it a layout the cards are displayed in what looks like an layout: 'auto'. Even after I assign the individual cards a layout: 'card' or a fullscreen: true,

    Clicking Item 1, Item 2 and Item 3 does nothing. And there's no error message logged to the console to state if anything is wrong.

    It's frustrating to be this close to getting it done but overlooking one tiny (probably obvious to the trained eye) little problem.

    Here comes the code:

    Controller

    Code:
    Ext.define('MyApp.controller.services-controller',{    
    	extend:'Ext.app.Controller',
        config:{
            refs:{
                leftList:'mypanel list[id=List]',
                myPanel:'mypanel container[id=mypanel]'
            },
            control:{
                leftList:{
                    itemtap:'onItemTap'
                	}	
            	}
        	},
        
    	 onItemTap:function(list, index, item, record, e , opts)
    	    {
    			var content = record.get('activeItem');
    			this.getMyPanel().animateActiveItem(content, {type: 'slide', direction: 'down', duration: 500, easing: 'ease-out'});     //also tried this.getMyPanel().setActiveItem(content);
    	    }
    });
    Model

    Code:
    Ext.define('MyApp.model.Services-model', {
        extend: 'Ext.data.Model',
        config:{
            fields: ['label','activeItem']
        }
    });
    Store

    Code:
    Ext.define('MyApp.store.Services-store',{
        extend: 'Ext.data.Store', 
        config:{
            model: 'dg.model.Services-model',
            storeId:'List',
            data:[
                {label:'Item 1', activeItem:0},
                {label:'Item 2', activeItem:1},
                {label:'Item 3', activeItem:2},
            ]
        }
    });
    View

    Code:
    Ext.define('MyApp.view.Services',{
    	extend: 'Ext.Container',   //Have also tried setting this to panel.
    	xtype:'services',
    	fullscreen: true,
    	layout: 'fit',
    	requires: [	'Ext.dataview.List',
    				'Ext.data.Store',
    				'Ext.Container'
    				],
        config: {
    		title: 'Services',
    		iconCls: 'star',
    		items:[
    		 	{
                    xtype: 'titlebar',
                    docked: 'top',
                    title: 'Services',
                    items: [
                        {
                            xtype: 'button',
                            docked: 'right',
                            hidden: true,
                            ui: 'back',
                            text: 'back'
                        }
                    ]
                },
                {
                    xtype: 'list',
                    docked: 'left',
                    id: 'List',
                    width: '200px',
                    itemTpl: [
                        '<div>{label}</div>'
                    ],
                    store: 'List',
                    items: [
                        {
                            xtype: 'titlebar',
                            docked: 'top',
                            title: 'List'
                        }
                    ]
                },{
    				xtype: 'panel',
    				id: 'myPanel',
                                    layout: 'card',  //currently displays nothing, but when removed the cards show as if layout: 'auto' is set
    				items:[
    				{
    					xtype: 'panel',
    					style: 'background-color: #000;color:#fff;',
    					html: 'White Text on a Black Background',
    				},{
    					xtype: 'panel',
    					style: 'background-color: #fff;color:#000;',
    					html: 'Black Text on a White Background'
    				},{
    					xtype: 'panel',
    					style: 'background-color: #333;color:#444;',
    					html: 'Grey Text on a Grey Background'
    				}]
    			
    		}
    	]}
    		
    	});
    I've seen that book quoted in a few places. It looks like a good read. Might have to grab a copy.
    Where else would you recommend to start learning about Sencha Touch? Bearing in mind what I know about javascript stems from my knowledge of Sencha Touch 2 (I did mention I was new to this).

    Thanks

  9. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      1  

    Default


    Sorry, I should've posted the code yesterday. I forgot to mention that you need to put 'fullscreen: true' config inside your Services view.

    Here's a working code.
    http://www.senchafiddle.com/#vKXIu

    Quote Originally Posted by gnmcvey View Post
    Where else would you recommend to start learning about Sencha Touch?
    I'm a noob to ST as well. Just started about 4-5 weeks ago. Unfortunately there's no book out on the subject (aside from miamicoder), so I just learn from examples, google, and asking on the forum. And of course lot's of experimentation, trial and error, etc.

    Couple of links I have on ST:

    http://techtalktone.wordpress.com/category/tech/mobile/

    Styling UI

    http://senchaexamples.com/

    Animations with ST

    Layout out components

    Data driven image carousel

  10. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    gnmcvey is on a distinguished road

      0  

    Default


    Pentool you are a scholar and a gent.

    This worked perfectly but after a bit of tweaking. For some reason when fullscreen: true was set in the config of MyApp.view.Services, the icon for this view wasn't showing up in my tabBar at the bottom of the page.

    However after taking a more clinical approach and injecting the code directly from SenchaFiddle and then removed fullscreen: true, everything seems to work.

    Regards

Thread Participants: 1

Tags for this Thread