Question

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

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不是一个函数或它只是没有说什么。如何让它切换面板？

Answer 1

如果您在cardpanel的处理程序中，则只能使用this。

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

Answer 2

您需要致电

this.layout.setActiveItem();

在处理程序中添加

scope: cardpanel

在处理程序定义下。

Answer 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');
            }
        }

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

3 个答案: