sencha-touch-2 - 将项目列表链接到轮播项目

Question

我想将列表链接到另一个视图（轮播布局），例如轮播项目编号。2. 我应该在这个括号里放什么？

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

我想实现类似 carousel.setActiveItem(x) 的东西，其中 x 是我的轮播内容。

Answer 1

我已经解决了你的问题。可能这对你有帮助。

应用程序.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

            }
        });

前端.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);

            }

    });

轮播.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");
            }
        });

Answer 2

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); 


}