Link item list to Carousel item

Question

I would like to link a list to another view (carousel layout), for example carousel item no. 2. What should I put in this bracket?

                onItemDisclosure: function() {
                    [......]
                }

I want to achieve something like carousel.setActiveItem(x) where x is my carousel content.

It depends on a lot of things. What is displayed in your list (Could you post the model) ? What do you want to display in you Carousel ? Is there a relation between the tapped list item and the item in the carousel you want to display ?.. — Titouan de Bailleul, Oct 17 '12 at 10:30
Hi, I'm using standard list (text). each item in the list has its own content, which I put in other view using carousel layout. here's the layout i want to achive http://postimage.org/image/45k02t8d5/ — Sola Sawa, Oct 18 '12 at 04:04
When I use Ext.ComponentManager.get('comp').setActiveItem(1); where 'comp' is my id for ext.tab.panel in in mainpanel, the view switch to carousel, but whichever list is clicked, it always point to carousel item 1. please advise. — Sola Sawa, Oct 18 '12 at 06:15

score 0 · Answer 1 · answered Oct 18 '12 at 07:11

I have worked on your problem. May be this helps you.

app.js

        Ext.application({
            name: "FrontApp",

            models: ["mymodel"],
            stores: ["mystore"],
            controllers: ["FrontAppController"],
            views: ["front","carousel"],

            launch: function () {
                var frontView = {
                    xtype: "frontview"
                };
                var Carousel = {
                    xtype: "carousel"
                };

                Ext.Viewport.add([frontView,Carousel]);//views called by x-type

            }
        });

front.js

    Ext.define("FrontApp.view.front", {
    extend: "Ext.Panel",
    alias: "widget.frontview",

        config: {
            layout: {
                type: 'fit'
            },
            fullscreen: true,
            scrollable: true,
            items: [

            {
                    xtype: 'list',
                    itemId: 'myList',
                    scrollable: false,
                    itemTpl: '{firstName}',
                    store: 'mystore51',
                    onItemDisclosure: true,

            }
            ],
            listeners:
            [

                {
                  delegate: "#myList",
                  event: "disclose",
                  fn: "onListDisclose"
                }

            ]
            },


            onListDisclose: function (list, record, target, index, evt, options) {
                console.log("calling carousel..");
                this.fireEvent("carouselCommand", this,record, target, index, evt, options);

            }

    });

carousel.js

 Ext.define('FrontApp.view.carousel', {
extend: 'Ext.carousel.Carousel',
xtype: 'carousel',

config: {

    items: [
        {
            xtype: 'panel',
            html: 'hello1'
        },
        {
            xtype: 'panel',
            html: 'hello2'
        },
        {
            xtype: 'panel',
            html: 'hello3'
        }
    ]
}

 });

FrontAppController.js

        Ext.define("FrontApp.controller.FrontAppController", {
        extend: "Ext.app.Controller",
            config: {
                refs: {   
                    frontView: "frontview", 
                    carouselView:"carousel"         
                 },
                control: {
                frontView: { 
                        carouselCommand: "onCarouselCommand"
                     }
                 }
            },
            // Transitions
            slideLeftTransition: { type: 'slide', direction: 'left' },
            slideRightTransition: { type: 'slide', direction: 'right' },


             onCarouselCommand: function (list, record, target, index, e, eOpts) {  
                console.log("onCarouselCommand");
                 var a=this.getCarouselView().setActiveItem(index); // setting the carousel item according to list index.
                 Ext.Viewport.animateActiveItem(a, this.slideLeftTransition);
            },
             // Base Class functions.
            launch: function () {
                this.callParent(arguments);
                console.log("launch");

            },
            init: function () {
                this.callParent(arguments);
                console.log("init");
            }
        });

Hai, thanks much for your code. Anyhow, I've achieved this by using: onItemDisclosure: function(list, record, index) { Ext.ComponentManager.get('comp').setActiveItem(1); //switch the view to carousel (my main content view) Ext.ComponentManager.get('content').setActiveItem(index); //set active item for carousel according to chosen list } — Sola Sawa, Oct 18 '12 at 08:16
@Sola Sawa From the next time please make sure to post your answer so that others will know that you have found the answer. — Vikal Sharma, Oct 18 '12 at 09:38
Yes i just refresh the page to post my answer, but it seems you're just ahead. Thanks! — Sola Sawa, Oct 18 '12 at 10:03

score 0 · Answer 2 · answered Oct 18 '12 at 10:04

onItemDisclosure: function(list, record, index) { 

//switch the view to carousel (my main content view) 
Ext.ComponentManager.get('comp').setActiveItem(1); 

//set active item for carousel according to chosen list 
Ext.ComponentManager.get('content').setActiveItem(index); 


}

Link item list to Carousel item

2 Answers2