Saya baru-baru ini mulai belajar ExtJS, dan kesulitan memahami bagaimana menangani Acara. Saya tidak memiliki pengalaman dari versi ExtJS sebelumnya.
Dari membaca berbagai manual, panduan, dan halaman dokumentasi, saya telah menemukan cara menggunakannya, tetapi saya tidak jelas bagaimana cara kerjanya. Saya telah menemukan beberapa tutorial untuk versi ExtJS yang lebih lama, tetapi saya tidak yakin bagaimana penerapannya di ExtJS 4.
Saya secara khusus mencari "kata terakhir" pada hal-hal seperti
- argumen apa yang bisa dilewati oleh fungsi penanganan acara? Apakah ada seperangkat argumen yang selalu dilewati?
- bagaimana cara mendefinisikan acara khusus untuk komponen khusus yang kami tulis? bagaimana kita bisa memecat acara adat ini?
- apakah nilai balik (benar / salah) memengaruhi bagaimana peristiwa itu terjadi? Jika tidak, bagaimana kita bisa mengendalikan peristiwa yang menggelegak dari dalam, atau di luar pengendali acara?
- Adakah cara standar untuk mendaftarkan pendengar acara? (Saya telah menemukan dua cara yang berbeda sampai sekarang, dan saya tidak yakin mengapa setiap metode digunakan).
Sebagai contoh, pertanyaan ini membuat saya percaya bahwa penangan event dapat menerima beberapa argumen. Saya telah melihat tutorial lain di mana hanya ada dua argumen ke pawang. Perubahan apa?
javascript
extjs
event-handling
extjs4
jrharshath
sumber
sumber
Jawaban:
Mari kita mulai dengan menjelaskan penanganan acara elemen DOM.
Penanganan event simpul DOM
Pertama-tama Anda tidak ingin bekerja dengan simpul DOM secara langsung. Sebaliknya Anda mungkin ingin memanfaatkan
Ext.Element
antarmuka. Untuk tujuan menugaskan penangan acara,Element.addListener
danElement.on
(ini adalah setara) dibuat. Jadi, misalnya, jika kita memiliki html:dan kami ingin menambahkan
click
pengendali acara.Mari kita ambil
Element
:Sekarang mari kita periksa dokumen untuk
click
acara. Handler-nya mungkin memiliki tiga parameter:Mengetahui semua hal ini dapat kami berikan penangan:
Penanganan acara widget
Penanganan acara widget sangat mirip dengan penanganan acara simpul DOM.
Pertama-tama, penanganan acara widget diwujudkan dengan menggunakan
Ext.util.Observable
mixin. Untuk menangani acara dengan benar, widget Anda harus bersaingExt.util.Observable
sebagai mixin. Semua widgetExt.util.Observable
bawaan (seperti Panel, Form, Tree, Grid, ...) telah sebagai mixin secara default.Untuk widget ada dua cara menetapkan penangan. Yang pertama - digunakan pada metode (atau
addListener
). Misalnya, buatButton
widget dan tetapkanclick
acara untuknya. Pertama-tama Anda harus memeriksa dokumen acara untuk argumen penangan:Sekarang mari kita gunakan
on
:Cara kedua adalah menggunakan konfigurasi pendengar widget :
Perhatikan bahwa
Button
widget adalah jenis widget khusus. Acara klik dapat ditetapkan untuk widget ini dengan menggunakanhandler
konfigurasi:Acara kustom diaktifkan
Pertama-tama Anda perlu mendaftarkan suatu acara menggunakan metode addEvents :
Menggunakan
addEvents
metode ini opsional. Seperti komentar untuk metode ini mengatakan tidak perlu menggunakan metode ini tetapi menyediakan tempat untuk dokumentasi acara.Untuk memecat acara Anda, gunakan metode fireEvent :
arg1, arg2, arg3, /* ... */
akan diteruskan ke handler. Sekarang kami dapat menangani acara Anda:Perlu disebutkan bahwa tempat terbaik untuk memasukkan panggilan metode addEvents adalah metode widget
initComponent
ketika Anda mendefinisikan widget baru:Mencegah terjadinya gelembung
Untuk mencegah gelembung Anda bisa
return false
atau gunakanExt.EventObject.preventDefault()
. Untuk mencegah penggunaan tindakan default browserExt.EventObject.stopPropagation()
.Sebagai contoh, mari kita tetapkan event handler klik ke tombol kita. Dan jika tidak tombol kiri diklik mencegah tindakan browser default:
sumber
Menembak berbagai aplikasi
Cara membuat pengontrol berbicara satu sama lain ...
Selain jawaban yang sangat bagus di atas saya ingin menyebutkan peristiwa aplikasi luas yang dapat sangat berguna dalam pengaturan MVC untuk memungkinkan komunikasi antara pengontrol. (extjs4.1)
Katakanlah kita memiliki Stasiun pengontrol (contoh Sencha MVC) dengan kotak pilih:
Ketika kotak pilih memicu perubahan acara, fungsi
onStationSelect
tersebut diaktifkan.Dalam fungsi itu kita melihat:
Ini membuat dan menjalankan aplikasi di seluruh acara yang dapat kita dengarkan dari pengontrol lain.
Dengan demikian di pengontrol lain kita sekarang bisa tahu kapan kotak pilih stasiun telah diubah. Ini dilakukan melalui mendengarkan
this.application.on
sebagai berikut:Jika kotak pilih telah diubah, kami sekarang menjalankan fungsi
onStationStart
di controllerSong
juga ...Dari dokumen Sencha:
Acara aplikasi sangat berguna untuk acara yang memiliki banyak pengontrol. Alih-alih mendengarkan acara tampilan yang sama di masing-masing pengendali ini, hanya satu pengendali yang mendengarkan acara tayangan dan menjalankan acara di seluruh aplikasi yang dapat didengarkan yang lain. Ini juga memungkinkan pengontrol untuk berkomunikasi satu sama lain tanpa mengetahui atau tergantung pada keberadaan masing-masing.
Dalam kasus saya: Mengklik simpul pohon untuk memperbarui data di panel kisi.
Perbarui 2016 berkat @ gm2008 dari komentar di bawah:
Dalam hal memecat acara khusus aplikasi, ada metode baru sekarang setelah ExtJS V5.1 diterbitkan, yang menggunakan
Ext.GlobalEvents
.Saat Anda memadamkan acara, Anda dapat menghubungi:
Ext.GlobalEvents.fireEvent('custom_event');
Ketika Anda mendaftarkan pawang acara, Anda menelepon:
Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);
Metode ini tidak terbatas pada pengontrol. Komponen apa pun dapat menangani acara kustom dengan menempatkan objek komponen sebagai cakupan parameter input.
Ditemukan di Sencha Docs: MVC Bagian 2
sumber
Ext.GlobalEvents.fireEvent('custom_event');
Saat Anda mendaftarkan pawang acara tersebut, Anda memanggilExt.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope};
Here is a fiddle . Metode ini tidak terbatas pada pengontrol. Komponen apa pun dapat menangani acara kustom dengan menempatkan objek komponen sebagai parameter inputscope
. Pertanyaannya harus dibuka kembali.Satu lagi trik untuk pendengar acara pengontrol.
Anda dapat menggunakan wildcard untuk menonton acara dari komponen apa pun:
sumber
Hanya ingin menambahkan beberapa pence ke jawaban yang sangat baik di atas: Jika Anda mengerjakan pra Extjs 4.1, dan tidak memiliki acara aplikasi yang luas tetapi membutuhkannya, saya telah menggunakan teknik yang sangat sederhana yang mungkin membantu: Membuat objek sederhana memperluas Observable, dan menentukan setiap peristiwa aplikasi yang Anda butuhkan di dalamnya. Anda kemudian dapat memecat acara tersebut dari mana saja di aplikasi Anda, termasuk elemen dom html aktual dan mendengarkannya dari komponen apa pun dengan menyampaikan elemen yang diperlukan dari komponen itu.
Maka Anda dapat, dari komponen lain:
Dan memecat mereka dari komponen atau elemen dom:
sumber
Hanya dua hal lagi yang menurut saya bermanfaat untuk diketahui, walaupun itu bukan bagian dari pertanyaan, sungguh.
Anda dapat menggunakan
relayEvents
metode ini untuk memberi tahu komponen untuk mendengarkan acara tertentu dari komponen lain dan kemudian memecatnya lagi seolah-olah mereka berasal dari komponen pertama. API API memberikan contoh kisi yang menyampaikanload
peristiwa toko . Sangat berguna ketika menulis komponen khusus yang merangkum beberapa sub-komponen.Cara sebaliknya, yaitu meneruskan peristiwa yang diterima oleh komponen enkapsulasi
mycmp
ke salah satu sub-komponennyasubcmp
, dapat dilakukan seperti inisumber