Konfigurasi Extjs ExtJS Extended JavaScript
memodifikasi. Setiap perubahan CSS ke dalam file ini akan langsung di upgrade.
o ext-base.js : adalah ext “adapter” atau file ini menyediakan fungsionalitas dari
ext. kita bisa merubah file yang kita inginkan dengan cara kita harus menggunakan library lain, seperti jQuery menggunakan Ext.
o ext-all.js atau ext-all-debug.js : adalah ext utama pada file library, yaitu semua
widget yang berada pada file ini. Versi debug digunakan untuk membangun dan versi non-debug digunakan untuk produksi.
untuk memulai membuat aplikasi dengan ExtJS anda membutuhkan minimal 3 file.. Ke-3 file itu adalah file HTML, file Javascript dan file CSS.
Dalam file HTML berisi code untuk menyertakan resource file aplikasi yaitu file Javascript dan file CSS, dan biasanya file HTML ini akan dipanggil atau direquest
oleh user. Aplikasi membutuhkan library ExtJS, dimana harus mengincludekan file
javascript dari ExtJS yaitu ext-base.js dan ext-all.js untuk production atau ext- base-debug.js dan ext-all-debug.js saat development, serta file css ext-all.css.
Sesuaikan lokasi path dengan lokasi path library extjs pada komputer. Di dalam tag body bisa di tambahkan informasi apapun atau tag div dari
DOM. Kemudian file Javascript lain applyayout.js, ini adalah file javascript baru yang di buat. Di dalamnya berisi kode javascript untuk pembuatan aplikasi web
ini dalamnya berisi kode javascript untuk pembuatan aplikasi web ini. Misalnya kita akan menampilkan window, kodenya seperti berikut:
Application Layout http:extjs.comlearnTutorial:Application_Layout_for_Beginners
reference local blank image Ext.BLANK_IMAGE_URL = ‘..extjsresourcesimagesdefaults.gif’;
create namespace Ext.namespace‘myNameSpace’;
create application myNameSpace.app = function {
do NOT access DOM from here; elements don’t exist yet private variables
var btn1; var privVar1 = 11;
private functions var btn1Handler = functionbutton, event {
alert‘privVar1=’ + privVar1; alert‘this.btn1Text=’ + this.btn1Text;
}; public space
return { public properties, e.g. strings to translate
btn1Text: ‘Button 1 ′,
public methods init: function {
if Ext.Ext2 { btn1 = new Ext.Button{
renderTo: ‘btn1-ct’, text: this.btn1Text,
handler: btn1Handler };
} else { btn1 = new Ext.Button‘btn1-ct’, {
text: this.btn1Text, handler: btn1Handler
}; }
} };
}; end of app Ext.onReadymyNameSpace.app.init, myNameSpace.app;
end of file
Kode diatas berisi kode minimal. Sangat disarankan kode javascript dalam file JS
JS project harus menggunakan struktur layout ini. Kode-kode diatas akan dibaca mulai dari atas sampai end of file. Tetapi kode javascript akan dieksekusi mulai
dari method Ext.obReady dimana kondisi ini dilakukan setelah semua kode javascript
dan resource aplikasi dimuat ke browser. Begitu method Ext.onReady dieksekusi maka obyek-obyek javascript
akan tercipta dan mengeksekusi method dan property. Sehingga kalau di buat kode cara membaca dari bawah ya, atau dari method Ext.onReady, dengan
mengibaratkan method ini adalah method mainnya. Untuk file CSS bersifat optional, dibutuhkan jika menggunakan CSS untuk
mempercantik tampilan. Jika file applayout.html ini di akses dari browser, maka akan muncul 2 button yang kalau diklik akan memunculkan pesan. Terlihat dalam
kode javascript kedua button memiliki penanganan action handler, yang didefinisikan dalam properti handler; Bentuk penulisan ini menggunakan format
JSON yang sangat ringkas dan fleksibel.
Setelah semua persayaratan untuk membuat ext terpenuh, maka kita bisa membuat suatu program sederhana dengan menggunakan file ext. seperti contoh
berikut ini :
html head
titleGetting Started Exampletitle link rel=stylesheet type=textcss
href=libextjsresourcescssext-all.css script src=libextjsadapterextext-base.jsscript
script src=libextjsext-all-debug.jsscript script
Ext.onReadyfunction{ Ext.Msg.alertHello, World;
};
script head
body -- Nothing in the body --
body html
Maka akan muncul tampilan seperti berikut :
Gambar 2.2 Hello Word