Extjs 4,事件处理,范围,自定义组件
Extjs 4, Event handling, scope, custom components
我有以下问题。我有tbar
的网格。在tbar
内部,我有Ext.form.field.Trigger
的编号。
当用户点击触发按钮时,我想使用grid
提供的功能过滤商店。我想在定义的class
中定义triggerclick
的功能,这样我就可以用不同的grid
重用这个组件。
所以,简而言之,我想找到被点击组件所在的面板并调用面板函数,或者将面板的引用传递给triggerclick
,或者用一些参数触发事件,这些参数将根据按钮的点击位置进行计算,或者可能有更好的方法来实现这一点。
代码(FilterField->触发器扩展):
Ext.define('GSIP.core.components.FilterField', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.filterfield',
initComponent: function() {
this.addEvents('filterclick');
this.callParent(arguments);
},
onTriggerClick: function(e, t) {
//Ext.getCmp('gsip_plan_list').filterList(); - working but dont want this
//this.fireEvent('filterclick'); - controller cant see it,
//this.filterList; - is it possible to pass scope to panel or reference to panel
//e.getSomething() - is it possible to get panel via EventObject? smth like e.getEl().up(panel)
}
});
面板代码:
Ext.define('GSIP.view.plans.PlanReqList', {
extend: 'Ext.grid.Panel',
alias: 'widget.gsip_devplan_list',
id: 'gsip_plan_list',
title: i18n.getMsg('gsip.view.PlanReqList.title'),
layout: 'fit',
initComponent: function() {
this.store = 'DevPlan';
this.tbar = [{
xtype: 'filterfield',
id: 'filter_login',
triggerCls: 'icon-user',
//scope:this - how to pass scope to panel without defining onTriggerClick here
// onTriggerClick: function() {
// this.fireEvent('filterclick'); //working event is fired but controller cant see it
// this.filterList; //this is working but i dont want to put this code in every filterfield
// },
// listeners : {
// filterclick: function(btn, e, eOpts) { //this is working
// }
// },
}];
this.columns = [{
id: 'id',
header: "Id",
dataIndex: "id",
width: 50,
sortable: true,
filterable: true
}, {
header: "Name",
dataIndex: "name",
width: 150,
sortable: true,
filterable: true
}, {
header: "Author",
dataIndex: "author",
sortable: true,
renderer: this.renderLogin,
filterable: true
}];
this.callParent(arguments);
},
filterList: function() {
this.store.clearFilter();
this.store.filter({
property: 'id',
value: this.down("#filter_id").getValue()
}, {
property: 'name',
value: this.down("#filter_name").getValue()
});
},
renderLogin: function(value, metadata, record) {
return value.login;
}
});
控制器代码的一部分:
init: function() {
this.control({
'attachments': {
filesaved: this.scanSaved,
}
}, {
'scan': {
filesaved: this.attachmentSaved
}
}, {
'#filter_login': {
filterclick: this.filterStore //this is not listened
}
});
},
filterStore: function() {
console.log('filtering store');
this.getPlanListInstance().filter();
},
控制器可以监听任何内容。只需要具体指定要做什么。但我会在面板级别触发事件-将其添加到触发器处理程序中:
this.up('panel').fireEvent('triggerclicked');
相关文章:
- 对自定义组件中的本地访问引用进行反应
- 点击tpl链接时,ExtJS 4.2自定义组件触发事件
- Extjs 4,事件处理,范围,自定义组件
- Gwd自定义组件及其事件处理程序
- 从自定义组件内部查找 Ember
- 在 ionic 2 中缓存自定义组件内容
- 挖空绑定自定义组件,使其不与中心视图模型冲突
- 使用 Aurelia在视图中动态生成自定义组件
- Ember.js自定义组件或视图
- Vue.js 使用 Vuex 和自定义组件,@click方法输出未定义
- 如何侦听 RactiveJS 自定义组件
- VideoJS v5 - 在 ES6 中添加自定义组件 - 我做得对吗?
- 如何将自定义组件与反应路由器路由转换一起使用
- React-Native:ScrollView,refs和自定义组件
- extjs4 - 将自定义组件添加到容器
- JSF 自定义组件在与 Oracle ADF 一起使用时缺少自动生成的 JavaScript
- 嵌入 API 自定义组件:未捕获类型错误:无法读取未定义的属性“ViewSelector2”
- KnockoutJS:访问自定义组件之外的可观察变量
- 控制铁页的聚合物自定义组件
- Sencha touch 2-自定义组件开发数据项未从存储加载值