ExtJS how to reference region panel in viewport

Question

Hi I have a problem about extjs viewport. I created a button and tried to reference to east panel but It seems a wrong way to access panel. Chrome developer tools showed a message "Uncaught TypeError: Cannot read property 'get' of undefined" I google this thread but my code is still not work.

my viewport:

var viewport = Ext.define('Fiddle.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',

items: [{
    // xtype: 'container',
    // itemId: 'header',
    region: 'north',
    //html: '<h1 class="x-panel-header">Page Title</h1>',
    border: false,
    margin: '0 0 5 0',
    items: [{
        xtype: 'button',
        text: 'collapse',
        handler: function() {
            var east = viewport.items.get('e');
            if (!!east.collapsed) {
                east.expand();
            } else {
                east.collapse();
            }
       }
    }]
}, {
    region: 'east',
    title: 'east Panel',
    itemId: 'e',
    //collapsible: true,
    //collapseMode: 'mini',
    floatable: false,
    html: 'Information goes here',
    split: true,
    placeholder:{ 
        width:20,
        items:[{
            xtype:'button',
        }]
    }
}, {
    region: 'center',
    xtype: 'container',
    layout: 'fit',
    items: {
        html: 'Center'
    }
}]
})

Fiddle

Answer 1

Instead of viewport.items.get('e') , use down :

viewport.down('#e')

Update:

In your code sample, viewport is referencing the viewport class , not instance. To access the instance from the button clicked, use:

b.up('viewport').down('#e')

Full example: https://fiddle.sencha.com/#fiddle/rl2

Answer 2

Avoid using itemId's. Doesn't b.up('viewport').down('container[region=east]'); do the trick?