Question

我们正在使用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类型的“手风琴”做同样的事情，当用户切换他们正在查看的手风琴窗格时，我无法触发事件。我们已经尝试将上面的内容保留原样，并将“tabchange”属性更改为“expand”，“beforeexpand”，“activate”和“collapse”。

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

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

我们不会收到任何错误。根本没有任何内容记录到控制台。我已经尝试将console.log替换为警告以排除该行的任何问题。

Answer 1

这对评论来说太长了所以添加为答案

经过一些谷歌搜索，我发现了我认为的一些相关帖子。看起来好像Ext JS中的手风琴没有与标签相同的事件。相反，您需要添加一个侦听器以捕获扩展。

See this post - 如果该页面的某些内容发生在相关部分：

你需要听手风琴中儿童面板的扩展事件，你可以这样做：

代码：

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

And I also found another similar post here on SO - 见两个答案

一旦您知道手风琴需要听众，您就可以在Google上找到一些结果。例如How do I attach an event handler to a panel in extJS?

This Google search will give you lots of examples.

希望有所帮助。

Answer 2

我发现Ext库文档对于找到这个问题的解决方案非常有帮助：here。

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

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

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

2 个答案: