Ext JS 2.0 tour of duty 1st day Menu And Toolbar
April 16th, 2008Ext JS 2.0 tour of duty 1st day Menu And Toolbar
Menu di Ext js dapat di buat dengan mudah 
(setelah belajar dari example na) , baru keliatan mudahnya.
Dasar yang harus di pegang teguh adalah !!!
1. Semua event di ext js di mulai dengan onReady
Ext.onReady(function(){
});
Setelah itu barulah kita berkreasi … dengan extjs ini … jangan sampe lupa !! bisa gak keluar tampilannya ntar.
2. Kalo mau nyoba mendingan make fierefox … install fiere bug ato kalo gak mau nginstall fierebug kita bisa liat error na di error console na mozilla.
Oke langsung aja ke bagian pertama dari dunia menu dan menu
Menu di defenisikan d class Ext.menu.Menu fungsinya dapat di gunakan sebagai container dari menu menu yang kita defenisikan baik di defenisikan secara langsung atau di defenisikan dari referensi variable lain.
1. Mendefenisikan Menu dengan secara langsung
• Buat sebuah objek menu yang akan menampung menu yang kita buat.
Var menu = new Ext.menu.Menu({
)}
• Setelah itu kita dapat mengisikan properties dari objek menu yang kita buat.
Var menu = new Ext.menu.Menu({
Id : ‘Menu Utama’, // id dari menu yang kita buat
)}
Var menu = new Ext.menu.Menu({
Id : ‘Menu Utama’, // id dari menu yang kita buat
Items : [ // isi dari menu yang di buat
{
text : ‘New’
},
{
text : ‘Open’
},
{
text : ‘Sub Menu’, // mengisikan sub menu secara langsung
menu : {
items :[
{
text: ‘Menu2’
},
{
text: ‘Menu3’
}
]}
}
]
});
2. Mengisikan menu dari variable yang sudah kita defenisikan terlebih dahulu
Sama seperti contoh di atas tapi kita harus mendefenisikan dulu variabelnya.
var dateMenu = new Ext.menu.DateMenu({
handler : function(dp, date){
Ext.example.msg(’Date Selected’, ‘You chose {0}.’, date.format(’M j, Y’));
}
});
Lalu kita tambahkan ke var menu
Var menu = new Ext.menu.Menu({
Id : ‘Menu Utama’, // id dari menu yang kita buat
Items : [ // isi dari menu yang di buat
{
text : ‘New’
},
{
text : ‘Open’
},
{
text : ‘Sub Menu’, // mengisikan sub menu secara langsung
menu : {
items :[
{
text: ‘Menu2’
},
{
text: ‘Menu3’
}
]}
},
{
text: ‘Kalender’,
menu : dateMenu
}
]
});
3. sampai pada langkah ke dua kita sudah mendefenisikan sebuah menu untuk selanjutnya kita harus meletakkan menu di dalam toolbar dengan merender nya ke salah satu div yang sudah kita sediakan di halaman html
var tb = new Ext.Toolbar(); // membuat toolbar
tb.render(’toolbar’); // me render toolbar ke div yang namanya toolbar
tb.add({
text:’Button w/ Menu’,
iconCls: ‘bmenu’, // <– icon
menu: menu // memanggil var menu
}
tapi liat di blogs q aj he he