Extjs学习(3):事件和动作

2016/02/18 15:38
阅读数 316

1. 什么是事件?

    事件+监听对象

Ext.create('Ext.Panel', {        
    html: 'My Panel',
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function() {
            Ext.Msg.alert('We have been rendered');
        }
    }
});

    Ext.panel.Panel当前有45个事件类型

2. 监听事件的发生

    点击按钮触发事件:MessageBox

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            Ext.Msg.alert('I was clicked!');
        }
    }
});

    点击按钮触发事件:this.hide() 

//点击按钮则隐藏
//在button里面定义监听者
Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button',
    listeners: {
        mouseover: function() {
            this.hide();
        },
        hide: function() {
            // Waits 1 second (1000ms), then shows the button again
            Ext.defer(function() {
                this.show();
            }, 1000, this);
        }
    }
 });

3. 稍后定义监听者:在组件创建完成后

//先定义了button
var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button'
});

//在定义监听事件
button.on('click', function() {
    Ext.Msg.alert('Event listener attached by .on');
});
var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button'
});

button.on({
    mouseover: function() {
        this.hide();
    },
    hide: function() {
        Ext.defer(function() {
            this.show();
        }, 1000, this);
    }
});

4. 移除监听

//下面定义了3秒后移除监听
var doSomething = function() {
    Ext.Msg.alert('listener called');
};

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button',
    listeners: {
        click: doSomething,
    }
});

Ext.defer(function() {
    button.un('click', doSomething);
}, 3000);

5. 范围监听选项

var panel = Ext.create('Ext.Panel', {
    html: 'Panel HTML'
});

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Click Me'
});

button.on({
    click: {
        scope: panel,                //定义范围,也可以改成  scope:button,
        fn: function() {
            Ext.Msg.alert(this.getXType());
        }
    }
});

6. 只监听事件一次:不使其重复触发事件

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Click Me',
    listeners: {
        click: {
            single: true,            //single属性
            fn: function() {
                Ext.Msg.alert('I will say this only once');
            }
        }
    }
});

7. 使用缓冲配置:

//不管你点击多少次,只要在2秒内,他只触发一次事件
var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Click Me',
    listeners: {
        click: {
            buffer: 2000,
            fn: function() {
                Ext.Msg.alert('I say this only once every 2 seconds');
            }
        }
    }
});

8. 触发自定义事件

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: "Just wait 2 seconds",
    listeners: {
        //监听者触发了一个myEvent事件,包含button自身,以及一个调用1-100之间的随机数
        myEvent: function(button, points) {
            Ext.Msg.alert('myEvent fired! You score ' + points + ' points');
        }
    }
});

Ext.defer(function() {
    var number = Math.ceil(Math.random() * 100);

    //通过事件名button调用fireEvent
    button.fireEvent('myEvent', button, number);
}, 2000);

9. 监听DOM事件:不是所有Extjs组件可以引发事件,设置容器的参数

var container = Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    html: 'Click Me!',
    listeners: {
        click: function(){
            Ext.Msg.alert('I have been clicked!')  
        }
    }
});

container.getEl().on('click', function(){ 
    this.fireEvent('click', container); 
}, container);

10. 事件的规范化:Extjs5版本以上,关键应用在touch-screen设备

    从鼠标点击等效到触摸或手指点击

// a mouse event,
myElement.on('mousedown', someFunction);

    事件系统转译成设备支持的touchstart

myElement.on('touchstart', someFunction);

    或者转译成支持的pointerdown

myElement.on('pointerdown', someFunction);

    注:并非所有的操作都是那么好转译的

11. 动作:Gestures

    除了标准的DOM事件外,Elements也可以应用到“gesture”事件,主要用在Sencha Touch

    有3中最初的类型:(pointer, touch, 和 mouse 事件)start, move, 和 end

Event Touch Pointer Mouse
Start touchstart pointerdown mousedown
Move touchmove pointermove mousemove
Stop touchend pointerup
//Ext JS 5允许任何手势回应任何类型的输入
Ext.get('myElement').on('longpress', handlerFunction);


展开阅读全文
打赏
2
1 收藏
分享
加载中
写得很赞哦!博主,我们做了一个帮助博主推广博客的app叫同行说,只需复制文章链接即可发布给更多程序员们看到哦,欢迎体验哈,一起发扬分享精神~
2016/02/18 17:13
回复
举报
更多评论
打赏
1 评论
1 收藏
2
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部