基于对象的EXT组件间通信

简介: 基于对象的EXT组件间通信 问题提出:主界面上有上下两个gridPanel,在点击上面的gridPanel的时候,触发下面的gridPanel事件,如联动表格 解决方案:1.在 GridPanel_1 中注册一个事件 this.

基于对象的EXT组件间通信

问题提出:主界面上有上下两个gridPanel,在点击上面的gridPanel的时候,触发下面的gridPanel事件,如联动表格

解决方案:
1.在 GridPanel_1 中注册一个事件

this.addEvents({'onClickGridRow':true});

2.获取GridPanel_1的行点击事件

this.on({'rowclick':this.onGetSelectionModel,scope:this});

3.GridPanel_1 行点击事件函数获取行的记录,并触发自定义事件

onGetSelectionModel:function(){
      var sm = this.getSelectionModel();
      var record=sm.getSelected();
   this.fireEvent('onClickGridRow',record);
}

4.在父组件中获取自定义事件

this.aGrid = this.items.itemAt(0);
this.aGrid.on({'onClickGridRow':this.onRecordFromGrid,scope:this});

5.父组件自定义事件处理函数中调用gridPanel_2的方法
,onRecordFromGrid:function(record){
 this.bGrid = this.items.itemAt(1);
 this.bGrid.refreshBGrid(record);
}

6.在gridPanel_2中定义事件处理方法
,refreshBGrid:function(record){
 alert(record.get('id'));
 this.getStore().baseParams['id'] = record.get('id');
 this.getStore().reload();
}

目录
相关文章
|
1月前
|
JavaScript
在Vue中,父组件和子组件之间是如何通信的?
在Vue中,父组件和子组件之间是如何通信的?
21 3
|
1月前
|
JavaScript
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
16 2
|
24天前
|
JavaScript
Vue全局事件任意组件间通信
Vue全局事件任意组件间通信
11 0
|
1月前
|
JavaScript API
Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记
Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记
30 3
|
1月前
|
JavaScript
vue父子组件之间通讯方式
vue父子组件之间通讯方式
12 2
|
2月前
|
存储 JavaScript
如果需要在组件之间共享一个`ref`,应该如何实现?
如果需要在组件之间共享一个`ref`,应该如何实现?
14 0
|
4月前
|
存储 人工智能 JavaScript
Vue组件之间的通信方式都有哪些?
Vue组件之间的通信方式都有哪些?
|
4月前
|
JavaScript 前端开发
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
55 0
|
10月前
|
JavaScript
Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)
Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)
349 0
|
JavaScript
Vue——08生命周期、绑定加冒号与不加的区别、总线机制、$bus事件总线、以及$emit与$on之间的关系
生命周期、绑定加冒号与不加的区别、总线机制、$bus事件总线、以及$emit与$on之间的关系
69 0