Ext JS网格面板事件

Question

我正在开发我的第一个EXT js mvc应用程序。我有一个问题，从控制器类添加事件监听器到我的网格面板。

我的问题是为什么我收到以下错误，而使用下面的代码“上”的方法，通过添加事件处理

错误：

Uncaught TypeError: 
    gridPanel.on is not a function 
    at constructor.init 

相关代码：

var gridPanel = Ext.ComponentQuery.query('userlist'); 
gridPanel.on('itemdblclick', this.editUser, gridPanel); 

我能够通过不同的方法添加处理程序，但我试图找出在网格面板引用中通过“on”方法添加的问题。任何帮助表示赞赏。

感谢

---

这里是我完整的控制器类

Ext.define('AM.controller.Users', { 
     extend: 'Ext.app.Controller', 

     views: ['user.List'], 

     init: function() { 

      var gridPanel = Ext.ComponentQuery.query('userlist'); 
      gridPanel.on('itemdblclick', this.editUser, gridPanel); 
     }, 

     editUser: function() { 
      console.log('User edit has begun..'); 
     } 
}, function() { 

}); 

我的网格面板类：

Ext.define('AM.view.user.List', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.userlist', 
    title: 'All Users', 
    id: 'usergrid', 

    initComponent: function() { 

      this.store = { 
       fields: ['name', 'email'], 
       data : [ 
        {name: 'Ed', email: 'ed@sencha.com'}, 
        {name: 'Tommy', email: 'tommy@sencha.com'} 
       ] 
      }; 

      this.columns = [ 
       {header: 'Name', dataIndex: 'name', flex: 1}, 
       {header: 'Email', dataIndex: 'email', flex: 1} 
      ], 

     this.callParent(arguments); 

    } 
}); 

Answer 1

上Ext.ComponentQuery的query method返回组件的数组。所以，你需要提供一个指标，如：

var gridPanel = Ext.ComponentQuery.query('userlist')[0]; 

Answer 2

Ext.ComponentQuery.query('userlist')返回找到组件阵列 - 所以你需要在阵列中选择第一项真正得到您的组件： Ext.ComponentQuery.query('userlist')[0]

的速记使得这更简单。 （由于@sceborati在评论中提到的）

当你使用你被它的xtype *

您也指定在您的组件，这是OK的ID查询组件查询，如果你只在有一个实例一页，（只要你有多个 - 你不应该使用ID） 你可以使用Ext.getCmp('componentid')更快地找到组件，因此Ext.getCmp('userlist')也适用于你。

所有这一切是说，要更好地利用ExtJS的MVC功能，您可以切换到使用的ViewController，然后你不需要在所有做任何查找您的组件：

Ext.define('AM.controller.Users', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.userlist', 
    editUser: function() { 
     console.log('User edit has begun..'); 
    } 
}); 

Ext.define('AM.view.user.List', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'userlist', 
    title: 'All Users', 
    id: 'usergrid', 
    controller: 'userlist', 
    store: { 
     fields: ['name', 'email'], 
     data: [{ 
      name: 'Ed', 
      email: 'ed@sencha.com' 
     }, { 
      name: 'Tommy', 
      email: 'tommy@sencha.com' 
     }] 
    }, 
    columns: [{ 
     header: 'Name', 
     dataIndex: 'name', 
     flex: 1 
    }, { 
     header: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }], 
    listeners:{ 
     itemdblclick:'editUser' 
    } 
}); 

注意alias配置添加到控制器，并在视图上相应的controller配置。

这意味着您可以通过在控制器上提供方法名称来指定侦听器。

listeners:{ 
     itemdblclick:'editUser' 
    } 

您也可能会注意到我已经动了你的列和存储配置了initComponent方法 - 你initComponent的使用会的工作，但这种方法是干净多了。

我创建了一个小提琴证明这个更新的代码：

https://fiddle.sencha.com/#view/editor&fiddle/1qvu

也似乎定义你的控制器时，被路过的一个额外的功能，作为第三个参数 - 您应该删除此。

---

*您使用 alias:'widget.userlist'这是一样的 xtype:'userlist'