изменить активный элемент в макете карты. ExtJS

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

В комментируемых частях я хотел бы реализовать переключение между двумя панелями в макете карты, но я не уверен, как это сделать. Я пытался использовать setActiveItem, но я всегда либо получал setActiveItem не является функцией, или он просто ничего не сказал. Как мне заставить его переключать панели?

Answer 1

Вы можете использовать this, только если вы находитесь в обработчике для cardpanel.

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