Cara membuat view / tampilan di Extjs

Sebelum memulai materi pembelajaran ini, setidaknya kamu sudah mengikuti dan mempraktekkan tutorial APLIKASI LOGIN (EXTJS 7.0.0), minimal Part 1 dan Part 2.

A. Cara 1: Membuat view Baru dengan SenchaCmd

Sebagai contoh, mari kita buat view users. Nantinya view ini kita gunakan untuk menu Users.

1. Buka Terminal / CMD
2. Masuk ke folder aplikasi:     cd MantapApp    
3. Perintah generate view:    sencha generate view users.Users    

 Secara otomatis akan terbuat folder user, file view, controller dan view model user.

B. Cara 2: Membuat view Baru tanpa SenchaCmd

Sebetulnya untuk cara 2 ini, sudah pernah kita praktekkan di tutorial Aplikasi Login Part 2. Mari kita coba untuk membuat view groups.

1. Di sisi kiri Text Editor, klik kanan folder app/view -> New Folder -> beri nama: groups

2. Di sisi kiri Text Editor, klik kanan folder app/view/groups -> New File -> beri nama: Groups.js

3. Di dalam file Group.js buat class baru seperti baris kode di bawah ini (boleh copas),

Ext.define('MantapApp.view.groups.Groups',{
    extend: 'Ext.panel.Panel',

    html: 'Tampilan Groups'
});

Seperti itulah cara membuat view baru, bisa pake cara 1 (sencha cmd) atau cara 2 (manual).

PENJELASAN BARIS KODE DARI PEMBUATAN VIEW

Isi baris kode dari file Users.js , UserController.js , UserModel.js dan Groups.js semuanya memiliki karakteristik yang sama.

1. Mendefinisikan nama Class
• format penamaan class view: NamaAplikasi.view.folder_view.nama_view
• class controller: NamaAplikasi.view.folder_view.nama_controller
• class view model: NamaAplikasi.view.folder_view.nama_viewmodel
• Mau saya ubah formatnya pake format buatan sendiri, bisa? Bisa, tapi ini sudah masuk level advance. Kalau sering berkecimpung dengan OOP, dah bisa dengan sendirinya.
2. Mendefinisikan config-config (atribut) dari Class yang dibuat.
• config utama adalah extend , artinya class yang kita buat merupakan class turunan dari class lain. 
• File view: Users.js dan Groups.js extend dari class Ext.panel.Panel 
• File controller: UserController.js extend dari Ext.app.ViewController
• File viewmodel: UserModel.js extend dari Ext.app.ViewModel 
• Sebagaimana konsep OOP manapun, ketika suatu class melakukan extend / inherit dari class lain (sebut parent), maka class ini identik sama seperti parent.
• Kita akan fokus dulu ke file view, yang extend dari class Panel. 
• Panel merupakan salah satu komponen Extjs. Semua komponen yang kita lihat di kitchen sink ini, didefenisikan dalam class-class. Komponen grid = class grid, komponen form = class form, dsb.
• Khusus untuk view, biasanya extend dari class Panel , Form atau Container.
• Untuk config-config selain extend, seperti html , alias , data , dll disesuaikan dengan kebutuhan dalam pengembangan aplikasi. Setiap class yang dibuat extjs memiliki config-config yang sama atau bahkan berbeda. Bisa kita lihat pada dokumentasi manual extjs, seperti contoh di bawah ini.

 

Semoga bisa mudah dimengerti dan dipahami. Jika memiliki pertanyaan silahkan tinggalkan komentar di bawah. Terima kasih.

Seri belajar extjs bahasa indonesia, seri tutorial extjs bahasa indonesia