Sencha Touch 之 Listeners(监听器)

一:painted事件

Ext.create( 'Ext.Panel',{

      html:'My Panel',

      fullscreen: true,

      listeners:{

            painted: function(){

                  alert(1);

            }

      }

})

    }     

二:实现对事件的监听

Buttons组件在被点击是出发的tap事件

Ext.Viewport.add({

            

                     xtype: 'button',

                     centered: true,

                     text: 'My Button',

                     listeners:{

                        tap: function(){

                                    alert( "你点击我");

                              }

                     }

            })

三:延迟加载监听器

两个监听器都会被调用，其调用时间先后顺序遵循从他们加入的次序

var muButton =    Ext.Viewport.add({

            

                     xtype: 'button',

                     centered: true,

                     text: 'My Button',

                     listeners:{

                        tap: function(){

                                    alert( "第一次点击" );

                              }

                     }

            });

            

      muButton.on( 'tap', function(){

                  alert( "第二次点击" );

            })

四:监听器的移除

我们使用un函数，移除监听器的事件

3秒后移除监听器的事件,再点击将没有任何事情发生

var doSomething = function (){

            alert( "处理程序");

      };

      var myButton =     Ext.Viewport.add({

            

                     xtype: 'button',

                     centered: true,

                     text: 'My Button',

                     listeners:{

                        tap:doSomething

                     }

            });

            

      Ext .defer(function (){

                  myButton.un( 'tap',doSomething);

            },3000);

动态的开启/闭关监听

var myButton =    Ext.Viewport.add({

            

                     xtype: 'button',

                     centered: true,

                     text: '监听禁用'

            });

            

      var handler = function(){

            alert( "监听启用");

      };    

      

      Ext.Viewport.add({

            xtype: 'togglefield',

            docket: 'button',

            label: '切换监听',

            listeners:{

                  change: function(field,thumb, enabled){

                         if( enabled){

                              myButton.on( 'tap',handler);

                              myButton.setText( '开启监听');

                        } else{

                              myButton.un( 'tap',handler);

                              myButton.setText( '关闭监听');

                        }

                  }

            }

      

      });

五:监听器选项

Scope作用域

在tap语句中的this，其实是指Panel组件对象

var myButton =    Ext.Viewport.add({

            

                     xtype: 'button',

                     centered: true,

                     text: 'Click me'

            });

            

      var panel = Ext.create( 'Ext.Panel',{

            html: 'Panel HTML'

      });

      

      myButton.on({

            tap:{

                  scope:panel,

                  fn: function(){

                        alert( "正在运行Panel's scope" );

                        alert( this.getHtml());

                  }

            }

      });

Single单次响应

该事件可能会触发很多次,但我们只想监听到一次就够了

var myButton =    Ext.Viewport.add({

            

                     xtype: 'button',

                     centered: true,

                     text: 'Click me'

            });

            

      

      

      myButton.on({

            tap:{

                  single: true,

                  fn: function(){

                        alert( "我只会说这一次" );

                  }

            }

      });

Buffer事件缓冲区

对于在短时间内大量触发的事件,我们通过buffer配置项来控制事件监听的调用频率。本例中,我们按钮的tap点击事件监听器将每2秒只调用一次,不管你如何点击它多少次

var myButton =    Ext.Viewport.add({

            

                     xtype: 'button',

                     centered: true,

                     text: 'Click me'

            });

            

      

      

      myButton.on({

            tap:{

                   buffer:2000,

                  fn: function(){

                        alert( "我每2秒只会说这一次" );

                  }

            }

      });

触发自定义事件

触发自定义函数--你只需调用fireEvent函数,传入任何event事件名称即可.本例，我们将触发一个名为myEvent的事件,并传入两个参数--button自身,以及一个1到100之间的数字

var myButton =    Ext.Viewport.add({

            

                     xtype: 'button',

                     centered: true,

                     text: '只是等待2秒',

                     listeners:{

                        myEvent: function(button,points){

                              alert( 'myEvent was fired!You score '+points+'points' );

                        }

                     }

            });

            

      

      

      Ext.defer(function(){

             var number = Math.ceil(Math.random()*100);

            myButton. fireEvent('myEvent',myButton,number);

      },2000)

DataView监听事件事件

var datalist=    Ext.Viewport.add({

            

                     xtype: 'dataview',

                     centered: true,

                     name:'enterpriseslist',
  scrollable: false,
 hidden:true,

listeners:
{
itemtap: function(dataview, index, target, record, e, eOpts)
{   
alert('执行的方法');
}
}

             });

或者

var datalist=    Ext.Viewport.add({

            

                     xtype: 'dataview',

                     centered: true,

                     name:'enterpriseslist',
  scrollable: false,
 hidden:true,

             });

initialize:function()
{

var me = this;
this.callParent();

me.down('dataview[name="enterpriseslist"]').on(
{
scope: me,
itemtap: 'openLink'
});

}

openLink:function(datalist, index, target, record, e, eOpts){

alert('执行的方法');

}