Question

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

在下面的示例中，Panel 1中的链接应该打开Panel 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()
});

Answer 1

这是我最近为改变Tab键导航处理程序的扩展面板而做的一个。我的手风琴面板包含在一个tabpanel中，所以第一个变量得到了活动标签，你可以改变它，但你想让手风琴面板本身符合你的需要，如：

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();
    }
},

Answer 2

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

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

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

Extjs4 Accordion - 在面板之间进行内联链接

2 个答案: