ExtJS 4.1.1 |为啥`view`和`this`在继承类的事件处理函数中不同
Posted
技术标签:
【中文标题】ExtJS 4.1.1 |为啥`view`和`this`在继承类的事件处理函数中不同【英文标题】：ExtJS 4.1.1 | Why `view` and `this` are different in event handler function of inherited classExtJS 4.1.1 |为什么`view`和`this`在继承类的事件处理函数中不同 【发布时间】：2012-09-16 02:01:01 【问题描述】：我编写了自己的 My.grid 继承自 Ext.grid.Panel 并在 itemdblclick 事件上设置监听器。
该事件的处理函数以view为第一个参数，以this为作用域。
我不明白为什么我在 view 和 this 中得到不同的值？
this 是My.grid 的一个实例
view 是Ext.grid.Panel 的一个实例（但我希望My.grid）
可能是我做错了什么？还是 ExtJS 的错误/功能？
如何将继承的小部件view refs 写入继承的对象？
这是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>ExtJS Test page</title>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all-gray.css">
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
<script type="text/javascript">
Ext.create('Ext.data.Store',
storeId: 'simpsonsStore',
fields: ['name', 'email', 'change'],
data:
'items': [
'name': 'Lisa', 'email': 'lisa@simpsons.com', 'change': 100 ,
'name': 'Bart', 'email': 'bart@simpsons.com', 'change': -20 ,
'name': 'Homer', 'email': 'home@simpsons.com', 'change': 23 ,
'name': 'Marge', 'email': 'marge@simpsons.com', 'change': -11
]
,
proxy: type: 'memory', reader: type: 'json', root: 'items'
);
Ext.define('MY.grid',
extend: 'Ext.grid.Panel',
alias: 'widget.simpsonsgrid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
header: 'Name', dataIndex: 'name' ,
header: 'Email', dataIndex: 'email' ,
header: 'Change', dataIndex: 'change'
],
initComponent: function ()
this.callParent(arguments);
this.on('itemdblclick', this.test, this);
,
test: function (view, record)
console.log(this); // instance of My.grid
console.log(view); // instance of Ext.grid.Panel
);
Ext.onReady(function ()
Ext.widget('simpsonsgrid',
renderTo: Ext.getBody()
);
);
</script>
</head> <body></body> </html>
【问题讨论】：
【参考方案1】：查看 API (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel)。您可以在那里看到此特定事件具有以下签名：
itemdblclick(
Ext.view.View this,
Ext.data.Model record,
HTMLElement item,
Number index,
Ext.EventObject e,
Object eOpts
)
所以实际上你应该在view 参数中得到一个Ext.grid.View 的istance。您可以通过访问view.ownerCt 获取MY.grid 的实例。
示例：http://jsfiddle.net/TLEFH/
【讨论】：
view.ownerCt 这正是我想要的。谢谢！
也可以向上查询：view.up('grid')。
view.up('grid') 我知道这个解决方案并且它是有道理的，但直观地说，当我可以抛出确切的变量时，我不喜欢使用字符串搜索引擎。洛洛给了我完全适合我的东西。以上是关于ExtJS 4.1.1 |为啥`view`和`this`在继承类的事件处理函数中不同的主要内容，如果未能解决你的问题，请参考以下文章
Extjs Combo - 为啥在我没有创建表单时加载组合包含组合
extjs 5，在gridpanel上定义dropzone，但不能drop，为啥？