Question

我创建了一个包含3个子面板的视图（面板）...... 当视图加载时，我希望一个函数在viewController中运行，并根据其结果，我希望子面板1可见（subpanel2是不可见的）或subpanel2是可见的（subpanel1是不可见的）

我该如何做到这一点？

Answer 1

您正在寻找卡片布局。它已经实施。所以你不必再次实施。只要告诉它巫婆面板会活跃它会做所有布局的事情本身。结帐api doc。

Answer 2

Accordion布局可以帮助您：

这是一种以可展开的手风琴风格管理多个面板的布局，默认情况下，在任何给定时间只能展开一个面板

Answer 3

将itemId提供给所有三个面板，然后是fireEvent。监听者

down()

在Controller中定义showHidePanel方法，并在该方法中使用hide()使用show() / img { margin: 10px; height: 170px; width: 170px; box-shadow: rgba(0, 0, 0, 0.2) 10px 10px; } @font-face { font-family: Moon Light; src: url(MoonLight.otf); } #header { background-position: top; margin: 0; padding: 10px; text-align: center; color: #ffb400; } h1 { font-family: Moon Light; background-image: url(polygon.jpg); margin: 0; } p { color: white; font-family: Moon Light; text-align: center; padding: 16%; font-weight: bold; font-size: 30px; background-image: url(polygon.jpg); margin: 0; } #footer { font-family: Moon Light; clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; border-bottom: 1px solid #ff3400; border-top: 1px solid #ff3400; background-color: #ffb400; color: #ff004b; } h3 { text-align: center; padding: 7%; background-image: url(polygon.jpg); margin: 0; font-family: Moon Light; color: #ffb400; font-size: 30px; } ul { font-family: Moon Light; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #ff3400; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #ff004b; } .active { background-color: #ffb400; }方法使用项目ID和隐藏/显示面板获取面板。

Answer 4

这是一个完整的例子，它很直接：

Fiddle

Ext.define('FooController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.foo',

    init: function(view) {
        var child = Math.random() < 0.5 ? 'p1' : 'p2';
        view.setActiveItem(this.lookupReference(child));
    }
})

Ext.define('Foo', {
    extend: 'Ext.container.Container',
    layout: 'card',
    controller: 'foo',

    items: [{
        title: 'P1',
        reference: 'p1'
    }, {
        title: 'P2',
        reference: 'p2'
    }]
});

Ext.onReady(function() {
    new Foo({
        renderTo: document.body,
        width: 200,
        height: 200
    });
});

在Ext JS中动态显示/隐藏子面板

4 个答案: