0

我有一个基本的 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()
});​
4

2 回答 2

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();
    }
},
于 2012-05-26T15:46:11.007 回答
1

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

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

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

于 2012-06-04T20:16:47.203 回答