extjs - selectionchanged 事件针对 xtype 选择触发两次

Question

最近我注意到在使用选择小部件 (CQ.form.Selection) 时 selectionchanged 事件会触发两次。当我从下拉列表中选择某个值时，将触发 selectionchanged 一次，并且在做出选择后焦点从选择小部件中丢失时再次触发(即 onblur)。

对话框结构如下。

<dialog jcr:primaryType="cq:Dialog" title="Test Component" xtype="panel">
    <items jcr:primaryType="cq:WidgetCollection">
        <title jcr:primaryType="cq:Widget" fieldLabel="Selection" name="./sel" type="select" xtype="selection">
            <listeners jcr:primaryType="nt:unstructured" selectionchanged="function(comp, val, isChecked) {console.log("selected");}"/>
            <options jcr:primaryType="cq:WidgetCollection">
                <opt1 jcr:primaryType="nt:unstructured" text="Option 1" value="1"/>
            <opt2 jcr:primaryType="nt:unstructured" text="Option 2" value="2"/>
            <opt3 jcr:primaryType="nt:unstructured" text="Option 3" value="3"/>
            </options>
        </title>
        <link jcr:primaryType="cq:Widget" fieldLabel="Some Text" name="./text" xtype="textfield"/>
    </items>
</dialog>

This issue is observed only when the Selection is of type select or combobox and not checkbox and radio.

我是不是执行错了？这种行为正常吗？如何确保 selectionchanged 事件只触发一次？

提前致谢!

P.S:我使用的是 CQ 5.5，不确定这种行为在最新版本中是否相同。

Answer 1

请尝试使用 xtype 组合并使用 change 事件，这确保事件只被触发一次。我很确定这会起作用，我已经在 CQ 5.6.1 中尝试过。这是文档 http://dev.day.com/docs/en/cq/5-5/widgets-api/?class=CQ.Ext.form.ComboBox .

如果您在 crx de/libs/cq/ui/widgets/source/widgets/form/Selection.js 中查看 Selection.js 的代码，有两个自定义事件 fireComboboxSelectionChanged 和 fireComboboxContentChanged，当发生选择时会触发 fireComboboxSelectionChanged，并且fireComboboxContentChanged 在发生变化时被触发。现在，如果我们查看 extjs 文档，就会在模糊发生之前触发更改 http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox-event-change所以理想情况下，这里看起来有两个独立的事件。但是，如果您查看代码，fireComboboxSelectionChanged 和 fireComboboxContentChanged 都会触发一个常见事件 this.fireEvent(CQ.form.Selection.EVENT_SELECTION_CHANGED，因此我猜该事件被触发了两次。同样，这只是我从我建议的代码中得出的初步猜测你把调试点放在代码中并使用 debugClientLibs=true 来找出这是否真的是原因。我可能是错的，并且仍然是 CQ 的学习者，根据我的推理回答。所以请通过在 javascript 中调试来验证自己。希望这会有所帮助。