05_事件处理

事件是Ext JS框架中非常重要的一部分。“事件”通知我们在程序中已经发生了某些事情。这些通知可以由很多行为发出。

Ext.Viewport.add({
     xtype: 'tabpanel',
     items: [{
         title: 'Employee Directory',
         xtype: 'grid',
         iconCls: 'x-fa fa-users',
         listeners: {
             itemtap: function() {
                 console.log('item tap!');
             }    
         },
         store: {
             data: [{
                 "firstName": "Jean",
                 "lastName": "Grey",
                 "officeLocation": "Lawrence, KS",
                 "phoneNumber": "(372) 792-6728"
             }, {
                 "firstName": "Phillip",
                 "lastName": "Fry",
                 "officeLocation": "Lawrence, KS",
                 "phoneNumber": "(318) 224-8644"
             }, {
                 "firstName": "Peter",
                 "lastName": "Quill",
                 "officeLocation": "Redwood City, CA",
                 "phoneNumber": "(718) 480-8560"
             }]
         },
         columns: [{
             text: 'First Name',
             dataIndex: 'firstName',
             flex: 1
         }, {
             text: 'Last Name',
             dataIndex: 'lastName',
             flex: 1
         }, {
             text: 'Phone Number',
             dataIndex: 'phoneNumber',
             flex: 1
         }]
     }, {
         title: 'About Sencha',
         iconCls: 'x-fa fa-info-circle'
     }]
 });

在这个例子中，我们将检测当一行被选中时触发的事件。

使用表格中配置的’listeners’属性，我们可以监听’itemtap’事件，并对事件作出反应。当一个项被选中时，该事件将被触发（当然，其他一些事件也会被触发），但没有对应的监听器，什么事情也不会发生。监听器对象也可以用来处理其它的grid事件。

提示：在这个示例中，我们通过在控制台打印一个消息来对itemtap事件作处理。

下一步：

既然我们可以对用户的行操作进行交互，接下来我们将进一步深入，最终会显示一张绑定我们自己的数据的表单。

深入探究

更多关于事件的信息，请查看我们的事件概览章节（http://docs.sencha.com/extjs/6.2.1/guides/core_concepts/events.html）。