изменение активного элемента в макете карты. ExtJS

У меня есть панель, использующая макет карты следующим образом: 

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 не является функцией, либо он просто ничего не говорил. Как заставить его переключать панели?

3 2
javascript c#-4.0 extjs

3 ответа:

Вам нужно позвонить 

this.layout.setActiveItem();

В обработчике и добавить

scope: cardpanel

Под определением обработчика.

7

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

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

Вы получаете "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');
            }
        }
1