Ext Js - Tutorial Aplikasi Bagian-1 - Programming is Playing

Etss,, akhirnya saya bisa juga membuat satu contoh program menggunakan Ext Js, memang butuh ketelitian dalam membuatnya, lihat tutorial dari http://likeadev.com/show/simple-ext-js-4-application-tutorial-part-1.html ini sangat membantu saya dalam membuat satu program sederhana ini, sebelumnya terima kasih untuk Mr Piotr Jankowski.

Yapss, pada tutorial pertama Ext Js kali ini, akan lebih berkonsentrasi pada aplikasi dasar dan pengembangan GUI (Graphical User Interface) dengan menampilkan data dari JSON. Yap, mari kita langsung saja memulai tutorial ini.

Download Ext Jsnya terlebih dahulu di Ext-4 atau di website resminya Sencha.com, kemudian ekstrak lalu masukkan kedalam projeknya ke dalam folder dengan nama ext-4.
Ext Js 4 memberikan konsep MVC kepada penggunanya untuk kemudahan ketika ingin membaca kembali sourcenya, ini berbeda dengan versi sebelumnya ExtJs-3. Berikut gambar skema MVCnya

Berikut penjelasan dari gambar tersebut :
- app - Isinya seluruh struktur MVC Ext Js.
- data - Sebagai data penyimpanan file JSON atau file lainnya seperti script PHP.
- ext-4 - Semua file library Ext JS harus berada didalam folder ini (misalnya. semua CSS dan JavaScript).

Sekarang mari kita buat Index.htmlnya didalam folder Site Root dari projek kita, berikut ini scriptnya

1:  <html>  
2:    <head>  
3:      <title id="page-title">Application</title>  
4:      <link href="ext-4/resources/css/ext-all.css" rel="stylesheet" type="text/css"></link>  
5:       <!-- GC -->  
6:       <!-- <x-compile> -->  
7:       <!-- <x-bootstrap> -->  
8:      <script src="ext-4/ext-dev.js" type="text/javascript"></script>  
9:       <!-- </x-bootstrap> -->  
10:      <script src="app.js" type="text/javascript"></script>  
11:       <!-- </x-compile> -->  
12:    </head>  
13:  <body>  
14:  </body>  
15:  </html>

Ini merupakan template dasar aplikasi Ext Js

Sebelum kita membuat script utama yaitu app.js, mari kita fokus ke model. Buat sebuah file Item.js didalam folder app/model. Berikut ini isinya
```
1:  Ext.define('Application.model.Item', {  
2:    extend: 'Ext.data.Model',  
3:    fields: ['item_id', 'name', 'description']  
4:  });  
```
Ext.define digunakan untuk mendefinisikan sebuah kelas atau bisa juga untuk menimpa yang sudah ada sebelumnya (extend akan direplace atau digantikkan oleh override). Atribut pertama yang ada pada method ini adalah 'Application.model.Item' yang berisi nama aplikasinya yaitu Application yang nantinya akan digunakan di file app.js, model itu nama folder file Item.js disimpan, dan Item sendiri itu sebagai nama dari filenya ...

Karena model merupakan satu item, kita harus membuat sesuatu yang akan digunakan sebagai repositori, proxy atau rekan. Ini harus memungkinkan kita untuk membaca dan menulis model dari source code. Mari kita membuat file Items.js dalam di folder app/store dengan source berikut:

1:  Ext.define('Application.store.Items', {  
2:    extend: 'Ext.data.TreeStore',  
3:    model: 'Application.model.Item',  
4:    autoLoad: true,  
5:    // Define the root of the json file  
6:    root: {  
7:     // Root should be expanded on  
8:     // the application start  
9:     expanded: true  
10:    },  
11:    proxy: {  
12:      // Defined this proxy type  
13:     type: 'ajax',  
14:      // Data source  
15:     url: 'data/items.json',  
16:     // Reader should be configured for   
17:     // json parsing  
18:     reader: {  
19:      type: 'json'  
20:     }  
21:    }  
22:  });

Objek store ini extend terhadap Ext.data.TreeStore, karena cocok untuk struktur data tree.

Untuk file jsonnya, anda bisa download Items.Json, kemudian letakkan didaldam folder data.

Selanjutnya, mari kita fokus ke tampilan. Mari kita buat folder item didalam app/view. Didalam folder item, kita buat dua file, List.js dan Show.js. Berikut source dari List.js

1:  Ext.define('Application.view.item.List', {  
2:   extend: 'Ext.tree.Panel',  
3:   // Shorthand name for this object  
4:   alias : 'widget.itemList',  
5:   // Item id - used by Ext.getCmp() method  
6:   title : 'Items',  
7:   // Content provider to this component. Data  
8:   // will be fetched and displayed on startup  
9:   store: 'Items',  
10:   // Disable display of that nasty blank spot  
11:   rootVisible: false,  
12:   // Override default displayed property name - change it from "text" to "name"  
13:   displayField: 'name',  
14:   minWidth: 150  
15:   // IMPORTANT:  
16:   // Trees with defined stores and no additional items do   
17:   // not require any "layout" parameter here  
18:  });

dan berikut ini untuk Show.js

1:  Ext.define('Application.view.item.Show', {  
2:   extend: 'Ext.panel.Panel',  
3:   // Shorthand name for this object  
4:   alias : 'widget.itemShow',  
5:   title : 'Item data',  
6:   // Layout configuration  
7:   layout: {  
8:    // Fully stretch this panel to  
9:    // it's container size  
10:    type: 'fit'  
11:   },  
12:   items: [{  
13:    xtype: 'component',  
14:    // Item id - used by Ext.getCmp() method for instance  
15:    // selection  
16:    id : 'item-description',  
17:    // Html inside this component  
18:    html: 'Please select an item on the left',  
19:    // Since adding parameter "padding" to this item   
20:    // doesn't work - we'll add some direct styles  
21:    style: {  
22:     padding:'10px'  
23:    }   
24:   }]  
25:  });

Setelah tampilannya kita buat, mari kita buat file Viewport.js untuk menyatukan tampilan yang sudah kita buat tadi, kita simpan didalam folder app/view, dan berikut ini sourcenya

1:  Ext.define('Application.view.Viewport', {  
2:    extend: 'Ext.container.Viewport',  
3:    // Layout configuration  
4:    layout: {  
5:     // Items inside will be aligned in a horizotal line  
6:     type: 'hbox',  
7:     // Stretch elements to fit the page size  
8:     align: 'stretch'  
9:    },  
10:    // Enable scrolling of this container once  
11:    // parent element (browser in this case) has  
12:    // been resized below minimal values  
13:    autoScroll: true,  
14:    minWidth: 960,  
15:    // Items array - contains all views attached to the viewport, eg. categories list  
16:    items : [  
17:    {  
18:     xtype: 'itemList',  
19:     flex: 1  
20:    },  
21:    {  
22:     xtype: 'itemShow',  
23:     flex: 5  
24:    }  
25:    ]  
26:  });

yapss, kita hampir selesai, setelah membuat model, data, dan tampilannya, kita butuh sesuatu yang akan menyatukan semuanya, kita butuh controller. Mari kita buat ItemController.js didalam folder app/controller, berikut ini sourcenya

1:  Ext.define('Application.controller.ItemController', {  
2:   // Extend basic controller object  
3:   extend: 'Ext.app.Controller',  
4:   // Attach store classes to this controller  
5:   stores: ['Items'],  
6:   // Attach model classes to this controller  
7:   models: ['Item'],  
8:   // ..and last but not least - the view classes  
9:   views: ['item.List', 'item.Show'],  
10:   // Refs parameter defines references to certain  
11:   // instances of components pointed by selector  
12:   refs: [  
13:   {  
14:    // Ref determines the name of the automagic  
15:    // this.get[ref-goes-here] method that returns  
16:    // instance of certain component  
17:    ref : 'itemShowDesc',  
18:    // Select #item-description component in  
19:    // item.Show view  
20:    selector: 'itemShow > #item-description'  
21:   }  
22:   ],  
23:   // when including the controllers in your application,   
24:   // the framework will automatically load the controller   
25:   // and call the init method on it  
26:   init: function() {  
27:    this.control({  
28:     'itemList' : {  
29:      // Action to be performed on select  
30:      select: this.onItemSelect  
31:     }  
32:    });  
33:   },  
34:   onItemSelect: function (selModel, selection) {  
35:    // Executed only when selection is a leaf  
36:    (selection.data.leaf) ? this.getItemShowDesc().update(selection.raw.description) : null;  
37:   }  
38:  });

Ini untuk sentuhan akhirnya, kita memerlukan skrip yang benar-benar akan meluncurkan aplikasi kita. Mari kita buat app.js, berikut ini sourcenya
```
1:  Ext.application({  
2:    name: 'Application',  
3:    // Automatically create an instance of AM.view.Viewport  
4:    // on application launch  
5:    autoCreateViewport: true,  
6:    // Attach controllers  
7:    controllers: ['ItemController']  
8:  });  
```
yapsss,, akhirnya selesai juga..
silahkan klik kanan run project ... dan lihat hasilnya ....

Terima Kasih Sudah Berkunjung di blog Sederhana Ini ....

Baca dengan teliti setiap langkah yang ada ... Selamat Mencoba ....