Extjs學習（3）：事件和動做

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);