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

私はかなり単純な解決策を見つけました：

<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 に答える
1

これは、タブ キー ナビゲーション ハンドラーの拡張パネルを変更するために最近行ったものです。私のアコーディオン パネルは 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();
    }
},
于 2012-05-26T15:46:11.007 に答える