Question

嗨我有关于extjs视口的问题。我创建了一个按钮并尝试引用东面板，但这似乎是一种访问面板的错误方法。 Chrome开发人员工具显示消息“Uncaught TypeError：无法读取属性'获取'未定义” 我谷歌这个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

而不是MainPage，请使用down：

viewport.items.get('e')

<强>更新

在您的代码示例中，viewport.down('#e')引用了视口类，而不是实例。要从单击的按钮访问实例，请使用：

viewport

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

Answer 2

避免使用itemId。不 b.up('viewport').down('container[region=east]'); 诀窍呢？

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

2 个答案: