Membuat Kelas Data Store Untuk Json

Di extJs sudah terdapat komponen data store untuk json yaitu sebagai berikut:

Ext.create(‘Ext.data.Store’, {
model: …,
fields: …,
proxy: {
type: ‘ajax’,
url: ‘url.php’,
actionMethods: {
read: ‘POST’
},
extraParams: {params_1: ‘a’, params_2: ‘b’},
reader: {
type: ‘json’,
root: ‘data’,
successProperty: ‘success’
}
}
});

Setiap kali, apabila kita membuat suatu kelas yang membutuhkan data store json. Maka kita harus menuliskannya seperti diatas. Hal itu tidak efisien dan efektif.

Lanjutkan membaca “Membuat Kelas Data Store Untuk Json”

Animasi “Loading” Saat Kelas Aplikasi Dimuat

Menambahkan Animasi Loading Saat kelas dimuat Pada Awal Aplikasi Dijalankan

Saat aplikasi extjs dijalankan, proses awalnya adalah meload/memuat kelas-kelas extjs dan kelas-kelas aplikasi yang dibuat ke browser client. Hal ini membutuhkan beberapa waktu hingga proses load/muat selesai atau komplit. Oleh karena itu agar terlihat prosesnya bekerja maka akan kita tambahkan animasi loading saat proses muat kelas.

Berikut ini adalah langkah-langkah untuk menambahkan animasi loading:
Lanjutkan membaca “Animasi “Loading” Saat Kelas Aplikasi Dimuat”

Penggunaan “xtype” dan “Ext.create” untuk Kelas View

Didalam extjs 4 untuk memanggil kelas view bisa dilakukan dengan menggunakan cara “xtype” atau “Ext.create”. Perbedaan kedua cara diatas adalah sebagai berikut:

cara “xtype”:
– Kelas view yang akan di pakai harus didefinisikan dahulu didalam controller. Misalkan kita memiliki kelas view dengan konfigurasi sbb:

Ext.define(‘MP.view.login’, {
extend: ‘Ext.panel.Panel’,
alias: ‘widget.panel_login’,
….
});

Lanjutkan membaca “Penggunaan “xtype” dan “Ext.create” untuk Kelas View”

Mengontrol Form pada aplikasi MVC

Jika aplikasi kita merupakan aplikasi MVC. Maka berikut ini adalah contoh penggunaan dalam mengontrol sebuah form.

Load data dari server
Jika kita ingin meload data dari server kedalam sebuah form yang diperlukan dari server adalah respon/output yang sudah dalam bentuk json atau dapat pula dalam bentuk xml. Hal yang perlu dipersiapkan adalah:

1. data model
Didalam aplikasi MVC data model kita letakkan di folder app/model dengan membuat nama file misalkan form.js dengan isi sebagai berikut:

Lanjutkan membaca “Mengontrol Form pada aplikasi MVC”

Menciptkan kelas pada aplikasi ExtJs 4

Komponen yang ada pada ExtJs4 merupakan penulisan sebuah kelas. Kita bisa membuat kelas sendiri didalam ExtJs 4. Untuk menciptakan sebuah kelas, dapat menggunakan metode “Ext.define” dengan aturan sebagai berikut:

Ext.define(Nama, Konfigurasi, Callback);

Parameter pertama mendefinisikan nama kelas dan merupakan String. Parameter kedua mendefinisikan anggota kelas atau sering disebut juga dengan parameter dan harus objek dengan semua properti dan metode yang dibutuhkan di kelas yang dibuat ini. Parameter ketiga mendefinisikan fungsi (opsional) bahwa yang dijalankan ketika kelas dibuat, ini berguna saat membuat kelas yang harus disertakan asynchronously menggunakan Loader.

Lanjutkan membaca “Menciptkan kelas pada aplikasi ExtJs 4”

Aplikasi MVC menggunakan ExtJs 4

MVC atau Model View Controller adalah sebuah metode untuk membuat sebuah aplikasi dengan memisahkan data (Model) dari tampilan (View) dan cara bagaimana memprosesnya (Controller). Dalam implementasinya kebanyakan framework dalam aplikasi website adalah berbasis arsitektur MVC.

Penerapan MVC ini juga bisa dibuat menggunakan ExtJs 4. Berikut ini adalah penjelasan bagaiman membuat aplikasi menggunakan ExtJs 4 dengan metode MVC.

Lanjutkan membaca “Aplikasi MVC menggunakan ExtJs 4”

Instalasi Ext JS 4

Seperti yang telah kita ketahui, Sencha merupakan perusahaan yang mengembangkan Ext JS, telah merilis versi 4 dari framework ExtJS. Jika dibandingkan dengan versi sebelumnya maka akan terlihat banyak sekali perbedaannya. Dalam totorial ini akan ditunjukan bagaimana cara untuk menginstall ExtJS versi 4.

Jika kita men-download versi 4 maka kita akan menemukan beberapa file dalam direktori root, yaitu:
– ext-all.js,
– ext-all-debug.js,
– ext-all-dev.js,
– ext.js,
– ext-dev.js

Lanjutkan membaca “Instalasi Ext JS 4”