Extjs4 Accordion - 面板之间的内联链接答案

【问题标题】：Extjs4 Accordion - inline link to go between panelsExtjs4 Accordion - 面板之间的内联链接
【发布时间】：2012-06-05 04:16:47
【问题描述】：

我有一个基本的 ExtJS 4.0 手风琴。我想在一个面板的文本中包含一个内联链接，该链接将关闭该面板并打开另一个面板。

在下面的示例中，面板 1 中的链接应该打开面板 2。什么样的点击功能会在这里起作用？

Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
layout:'accordion',
layoutConfig: {
    // layout-specific configs go here
    titleCollapse: false,
    animate: true,
    activeOnTop: true
},
height: 300,
width: 400,
items: [{
    title: 'Panel 1',
    id: 'p1',
    html: 'Text goes here. <p><a id="linkP2" href="#">Go to panel 2</a></p>'
},{
    title: 'Panel 2',
    id: 'p2',
    html: 'Panel content!'
},{
    title: 'Panel 3',
    id: 'p3',
    html: 'Panel content!'
}],
renderTo: Ext.getBody()
});

【问题讨论】：

标签： extjs accordion

【解决方案1】：

这是我最近所做的，用于更改选项卡键导航处理程序的扩展面板。我的手风琴面板包含在一个选项卡面板中，因此第一个变量获取活动选项卡，您可以更改它，但是您希望根据您的需要获取手风琴面板本身，例如：

var tab = Ext.ComponentQuery.select(panel[layout=accordion]);

如果这是您的应用程序中唯一的手风琴面板，您可以获得对手风琴的参考。

// direction arg is either 1 or -1 depending on whether we want to go
// forward or backward
shiftPanels: function(direction) {
    var tab = this.getMainPanel().getActiveTab(), // gets the active tab panel
        panels = tab.items, // gets all of the accordion panels
        active = tab.child('[collapsed=false]'), // gets the expanded panel
        shifted;

    // get the panel at direction + index (the panel we want to expand)
    panels.each(function(panel, idx) {
        if (active == panel) {
            shifted = panels.getAt(direction + idx);
            return false;
        }
    });

    // expand the shifted panel or wrap around to the beginning or end
    if (shifted) {
        shifted.expand();
    } else if (direction > 0) {
        shifted = panels.getAt(0);
        shifted.expand();
    } else {
        shifted = panels.getAt(panels.length - 1);
        shifted.expand();
    }
},

【讨论】：

这有帮助，但我最终找到了一个相当简单的解决方案。这是启用键盘选项卡的好方法。

【解决方案2】：

我最终找到了一个相当简单的解决方案：

<a id="linkP2" href="javascript:onClick=Ext.getCmp(\'p2\').expand();">Go to panel 2</a>

Ext.getCmp.expand 允许在手风琴内选择某个 ID。

【讨论】：