ExtJS 如何在视口中引用区域面板

Question

您好，我有一个关于 extjs 视口的问题。我创建了一个按钮并尝试引用东面板，但这似乎是访问面板的错误方式。 Chrome 开发者工具显示了一条消息 "Uncaught TypeError: Cannot read property 'get' of undefined" 我google这个thread 但是我的代码还是不行。

我的视口：

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

代替viewport.items.get('e')，使用down:

viewport.down('#e')

更新：

在您的代码示例中，viewport 引用视口 class，而不是实例。要从单击的按钮访问实例，请使用：

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

完整示例：https://fiddle.sencha.com/#fiddle/rl2

Answer 2

避免使用 itemId。没有 b.up('viewport').down('container[region=east]'); 成功了吗？

ExtJS 如何在视口中引用区域面板

ExtJS how to reference region panel in viewport

javascript

extjs

viewport

extjs-mvc

extjs5