ExtJS组件层级事件传递：如何将ComboBox的load事件逐层向上传递？

当然可以实现这种事件逐层传递的需求，这种方式能降低组件间的耦合度，更符合模块化的设计思路。具体实现步骤如下：

1. 在ComboBox的load事件中触发panel2的自定义事件
   当ComboBox的load事件触发时，手动调用panel2的fireEvent方法，向上传递事件（可携带所需参数）：

   this.panel1.panel2.CBO.on({
       load: function(combo) {
           // 触发panel2的自定义事件，比如命名为'cboLoaded'
           this.panel1.panel2.fireEvent('cboLoaded', combo);
       }
   });
   

2. 在panel2中监听自定义事件并传递至panel1
   给panel2绑定上述自定义事件，接收到后继续向上触发panel1的同名（或自定义）事件：

   this.panel1.panel2.on({
       cboLoaded: function(combo) {
           // 将事件传递给panel1
           this.panel1.fireEvent('cboLoaded', combo);
       }
   });
   

3. 在Controller中监听panel1的事件
   最后在Controller里直接监听panel1的cboLoaded事件，处理原load事件的业务逻辑：

   this.panel1.on({
       cboLoaded: function(combo) {
           // 这里编写原load事件的处理逻辑
       }
   });
   

额外说明 #

• 自定义事件名称可根据业务语义调整，比如comboboxDataLoaded，只要保持传递过程中名称一致即可
• 传递时可按需携带更多参数，比如加载的数据集合、加载状态等，满足业务需求
• 这种方式避免了Controller直接深层级访问子组件，后续组件结构调整时，只需调整事件传递逻辑，无需修改Controller中事件监听的核心代码，维护性更强

内容的提问来源于stack exchange，提问作者Charles Candy