Javascript 如何在cfLayout手风琴中设置onExpand事件

我们使用CFLayout在web应用程序中创建选项卡结构。创建该布局后，我们称此函数：

mytabs = ColdFusion.Layout.getTabLayout("#attributes.cflayoutName#");
mytabs.on('tabchange',
    function(tablayout,tab) {           
        var tabtitle = tab.title;
        alert(tabtitle); // Actual code does various useful 'stuff' here.
    }
);

这段代码运行得非常好，每次用户单击选项卡时都会显示警报

问题是，我们现在正试图对CFLayout类型的“accordion”执行相同的操作，当用户切换他们正在查看的accordion窗格时，我无法触发事件。我们已经尝试将上述内容保持原样，并将“tabchange”属性更改为“expand”、“beforexpand”、“activate”和“collapse”

对于此测试，我使用以下简单的JS函数来避免onchange事件中JS引起的问题：

mytabs = ColdFusion.Layout.getAccordionLayout("#attributes.cflayoutName#");
mytabs.on('expand',
    function(tablayout,tab) {
        console.log('test');
    }
);

我们没有收到任何错误。控制台上根本没有记录任何内容。我已尝试将console.log替换为一个警报，以排除该行出现的任何问题。

这对于作为答案添加的注释来说太长了

在谷歌搜索之后，我发现了一些我认为是相关的帖子。Ext JS中的手风琴似乎没有与选项卡相同的事件。相反，您需要添加一个侦听器以捕获扩展

-如果该页面出现问题，请参阅相关内容：

您需要在手风琴中聆听子面板的展开事件，您可以执行以下操作：

代码：

    myAccordion.add(myFunc('myTitle'));
    function myFunc(title)
    {
       return new Ext.Panel(
       {
          title: title,
          listeners: { 'expand': {fn: something, scope: foo}}
       }
       );
    }

-看到两个答案了吗

一旦你知道手风琴需要一个听众，你可以在谷歌上找到很多结果。比如

---

希望对您有所帮助。

我发现Ext library文档对找到此问题的解决方案非常有帮助：

Ext库有一个getComponent方法，允许您引用尝试向其中添加expand事件的accordion布局面板。完成此操作后，可以使用上面使用的“on”方法将展开事件分别指定给每个面板

for (x=1; x<accordionLayoutArray.length; x++) {
        mytabs.getComponent(accordionPanelName).on('expand',
            function(tab) { ... });
}

---

用于（x=1；XT为了加强您的回答，我对文档的理解是，当panel expand事件特定于某个面板时，任何选项卡更改都会触发tabchange事件。谢谢；这非常有用。我现在正试图通读并更好地理解这一点，但实际上我遇到的所有示例都显示了如何在de时添加侦听器细化手风琴。但是，由于ColdFusion进行定义，因此我需要在事件发生后以编程方式添加侦听器。您知道我在哪里可以找到如何进行此操作的代码示例吗？不，很遗憾，我没有代码示例。我将从查看ColdFusion生成的源代码开始。在您的ch浏览器中哦，使用“查看源代码”选项。这应该告诉你ColdFusion是如何定义手风琴的。