代码之家  ›  专栏  ›  技术社区  ›  Raymond Yeh

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

  •  0
  • Raymond Yeh  · 技术社区  · 9 年前

    嗨,我对extjs视口有问题。我创建了一个按钮,并试图引用东面板,但这似乎是访问面板的错误方式。Chrome开发者工具显示消息“UncaughtTypeError:无法读取未定义的属性'get'” 我搜索这个 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

    2 回复  |  直到 9 年前
        1
  •  0
  •   Greendrake    9 年前

    而不是 viewport.items.get('e') 使用 down :

    viewport.down('#e')
    

    更新:

    在代码示例中, viewport 正在引用视口 ,而不是实例。要从单击的按钮访问实例,请使用:

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

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

        2
  •  0
  •   Tarabass    9 年前

    避免使用itemId。不 b.up('viewport').down('container[region=east]'); 达到理想的结果