更改卡片布局中的活动项目。 ExtJS答案

【问题标题】：change active item in a card layout. ExtJS更改卡片布局中的活动项目。 ExtJS
【发布时间】：2011-03-21 20:34:00
【问题描述】：

我有一个使用卡片布局的面板，如下所示：

var cardpanel = new Ext.Panel(
{
    id: 'cardPanel',
    //title: 'Card Layout',
    region: 'center',
    layout: 'card',
    activeItem: 0,
    autoDestroy: false,
    bodyStyle: 'border-top:0px',
    defaults: {
        border: false
    },
    items: [mediaGrid, mappanel],
    tbar: [
        {
            id: 'card-media',
            text: 'Media',
            icon: '/img/silk/images.png',
            width: 50,
            handler: function () {
                //switch to media
            }
        },
        {
            id: 'card-map',
            text: 'Map',
            icon: '/img/silk/map.png',
            width: 50,
            handler: function () {
                //switch to map
            }
        }
    ]
});

注释部分是我想在卡片布局中实现 2 个面板之间切换的地方，但我不知道该怎么做。我试过使用 setActiveItem 但我总是要么得到 setActiveItem 不是一个函数，要么它什么也没说。如何让它切换面板？

【问题讨论】：

您是如何尝试调用“setActiveItem”的？
我试过 setActiveItem(1)、setActiveItem('1') 和 setActiveItem('card-map')。

标签： javascript asp.net c#-4.0 extjs

【解决方案1】：

你需要打电话

this.layout.setActiveItem();

在处理程序中并添加

scope: cardpanel

在处理程序定义下。

【讨论】：

别忘了传入你想要设置为活动项的项（例如this.layout.setActiveItem(0)或this.layout.setActiveItem('componentId')）
我已经尝试过 this.layout.setActiveItem(1) 和 this.layout.setActiveItem('card-map') 并且它们都给了我同样的错误。

【解决方案2】：

如果您在卡片面板的处理程序中，则只能使用this。

cardpanel.layout.setActiveItem(0); // to switch to mediaGrid
cardpanel.layout.setActiveItem(1); // to switch to mappanel

【讨论】：

【解决方案3】：

您得到“setActiveItem 不是函数”，因为您调用该方法的对象没有该函数。简而言之，您使用了错误的对象来调用 setActiveItem 方法。您需要将代码修改为：

{
            id: 'card-media',
            text: 'Media',
            icon: '/img/silk/images.png',
            width: 50,
            scope: this,
            handler: function () {
                this.layout.setActiveItem('card-map');
            }
        },
        {
            id: 'card-map',
            text: 'Map',
            icon: '/img/silk/map.png',
            width: 50,
            scope: this,
            handler: function () {
                this.layout.setActiveItem('card-media');
            }
        }

【讨论】：