Persyaratan ExtJS4 adalah mekanisme baru, terutama untuk mengimplementasikan mekanisme pemuatan asinkron. Dengan cara ini, file js yang sesuai tidak akan dimuat kecuali tombol atau opsi yang sesuai diklik, sehingga meningkatkan kecepatan pemuatan dan waktu tunggu pengguna.
Mekanisme kebutuhan diimplementasikan melalui fungsi Ext.Loader.setConfig untuk mengatur direktori pemetaan untuk pencarian file, dan kemudian menggunakan Ext.require untuk memuat file js yang sesuai saat diperlukan.
Struktur penyimpanan file adalah sebagai berikut:
Folder ux berada di direktori yang sama dengan Lesson2.htm dan Lesson22.js, dan MyWin.js yang digunakan disimpan di folder ux.
Kode pada Lesson2.html adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=GBK">
<title>desktop extjs4</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../extjs4/resources/css/ext-all.css" />
<skrip type="text/javascript" src="../../extjs4/bootstrap.js"></script>
<skrip type="text/javascript" src="lesson22.js"></script>
</kepala>
<tubuh>
<button id="myButton" align="center">tampilkan</button>
</tubuh>
</html>
Pada potongan kode ini, file MyWin.js yang ada di direktori ux tidak dimuat, sehingga ketika halaman dimuat, file MyWin.js tidak akan dimuat secara bersamaan, tetapi akan dimuat kembali bila diperlukan. Kebutuhan di sini dicapai dengan mengklik tombol.
Isi file Lesson22.js adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
(fungsi(){
Ext.Loader.setConfig({
diaktifkan:benar, //Aktifkan mode pemuatan asinkron
jalur:{
myApp:'lesson2/ux' //Lokasi file deklarasi
}
});
Ext.onReady(fungsi(){
Ext.require('ux.MyWin',function(){
var mw = Ext.create('ux.MyWin',{
Judul: 'Ujianku'
});
Ext.get('MyButton').on('klik',function(){
mw.show();
});
});
});
})();
Isi file MyWin.js pada direktori ux adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
Ext.define('ux.Menangku',{
perpanjang:'Ext.window.Window',
Judul: 'mendaftar',
lebar:400,
tinggi:300
});
Catatan: Nama file MyWin dan nama fungsi di sini harus sama. Saya mengujinya.
Pada awalnya saya menggunakan metode menulis pada kuliah kedua video pengajaran ExtJS4 di uspcat, tetapi hasil yang saya inginkan tidak dapat muncul. Mungkin karena masalah versi, atau mungkin karena masalah saya sendiri ini, saya bisa menggunakan metode require. Ini adalah catatan bagi siapa saja yang memiliki kebingungan yang sama.