Headlines:

reading news

layouting extjs

Category: our product

Created on Tuesday, 13 December 2011 13:17

Written by eiostudio

layouting extjs

Mau nyoba bikin tutorial baru tentang extjs.. kalo sebelumnya kita dah bahas ajax crud jquery codeigniter...
tutorial yang sekarang, kita mau bikin ajax crud extjs codeigniter.. tapi sebelumnya kita perlu tau dulu cara-cara ngodingin extjs... hihihi makanya judulnya bukan langsung ke ajax crud.. meh banyak isi blognya.. xixixi...

download dulu extjs-nya dulu disini donlotnya yg versi 3 dulu.. soalnya ku juga blom pernah coba yang versi 4, lagian masi pre-release 3.. kita tunggu aja versi 4 release-nya

karena kita pingin nyoba extjs dengan backend codeigniter maka kita donlot juga codeigniter-nya download disini

kalo sudah di download ekstrak dan kopikan ke home direktori kemudian ubah foldernya dengan nama tutor_extjs

seperti biasa kita ubah dulu beberapa konfigurasi buka file config.php yg ada di direktori /application/config/config.php

ubah bagian

$config['base_url'] = '';

jadi

$config['base_url']    = 'http://localhost/tutor_extjs';

sekarang buka aplikasi kita lewat browser dengan mengakses alamat ini http://localhost/tutor_extjs/ kalo udah muncul ucapan selamat welcome to codeigniter berarti settingan sudah betul.

kita lanjutkan.. kita coba bikin controller dengan nama home, caranya gimana..? kita bikin file home.php di dalam direktori /application/controllers/home.php isi file home.php - nya

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home extends CI_Controller{
function __construct(){
        parent::__construct();
}
function index(){
        $this->load->view('home_view');
}
}
/* End of file home.php */
/* Location: ./application/controllers/home.php */

ada sedikit perbadaan antara ci versi 1.7.* dan versi 2.0.0 ini.. pada bagian saat kita akan meng-extend ke controller ato pun ke model dan pada saat kita membuat konstruktor

selanjutnya kita akan membuat viewnya nama filenya home_view.php karena pada method index() di controller home kita meload veiw ke home_view ($this->load->view('home_view')), file home_view.php nya kita simpan di /application/views/home_view.php isi filenya seperti ini..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        
    </body>
</html>

Sekarang coba buka browser trus akses kontroler yang kita bikin... http://localhost/tutor_extjs/index.php/home

jika tampilannya blank.. berarti sudah jalan...

sekarang kita akan mengaktifkan library session dan helper url

fungsi dari library session adalah untuk memudahkan penggunaan session

fungsi dari helper url adalah untuk mempersingkat penulisan base url

untuk mengaktifkan library session kita masuk ke direktori application/config/autoload.php

ubah bagian

$autoload['libraries'] = array();
$autoload['helper'] = array();

menjadi

$autoload['libraries'] = array('session');
$autoload['helper'] = array('url');

simpan file autoload.php

kita ubah kembali file config.php yang ada di direktori /application/config/config.php

ubah bagian ini :

$config['encryption_key'] = '';

menjadi

$config['encryption_key'] = 'eiostudio_';

isi variable array ini tidak mutlak harus di eiostudio_ tapi temen2 bisa isi sesuai dengan keperluan

kita bikin direktori di root aplikasi kita dengan nama js jadi nanti strukturnya

tutor_extjs(root aplikasi kita)

|-- application

|-- js(direktori ini yg kita bikin)

|-- system

isi folder js

isi file js

gambar 1. isi folder js

isi folder adapter

gambar 2. isi folder adapter

isi folder css

gambar 3. isi folder css

isi folder images/default

gambar 4. isi folder images/default

semua file-file yang kita butuhkan ada di dalam folder demo extjs 3 yang udah kita donlot... pindahkan file dan direktori yg diperlukan ke dalam folder extjs di folder js.. sesuaikan dengan gambar2 di atas...

kalo file dan direktori sudah sesuai dengan struktur di atas, kita ubah file home_view.php yang ada di direktori application/views/, tambahkan baris berikut di bagian head

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
<link rel="stylesheet" type="text/css" href="/<?php echo base_url();?>js/extjs/css/ext-all.css" />
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="/<?php echo base_url()?>js/extjs/adapter/ext/ext-base.js"></script>

        <!-- ENDLIBS -->
        <script type="text/javascript" src="/<?php echo base_url()?>js/extjs/ext-all.js"></script>
        <script type="text/javascript">
            var base_url  = '<?php echo base_url();?>';
            var site_url  = '<?php echo site_url();?>';
            Ext.BLANK_IMAGE_URL = '<?php echo base_url()?>js/extjs/images/default/s.gif';
        </script>

        <script type="text/javascript" src="/<?php echo base_url()?>js/applications/config.js"></script>
    </head>
    <body>
        
    </body>
</html>

mulai dari sini kita akan membuat layout untuk aplikasi CRUD kita hiihihi.. doakan tutorialnya bisa konsisten ya.. hihihi...

didirektori js kita bikin lagi direktori dengan nama applications, lalu pada direktori applications kita bikin file dengan nama config.js

isi file config.js

Ext.onReady(function(){
    new Ext.Viewport({
        layout : 'border',
        defaults : {
            split : true
        },
        items : [
            {region:'north',html:'Atas'},// 1
            {region:'east',html:'Kanan'},// 2
            {region:'west',html:'Kiri'},// 3
            {region:'center',html:'Tengah'},// 4
            {region:'south',html:'Bawah'}// 5
        ]
    });
});

diata merupakan baris kode untuk melayout halaman.. tediri dari bagian north,east,west,center dan south

jika kita akan melakukan layout seperti di atas maka region center wajib di buat kenapa? hihihi enatah lah.. saya gak paham juga soalnya kalo gak ada region center viewport gak bisa kita gunakan

rencana kita pada tutorial selanjutnya :

bagian no 1 (region:north)
kita akan set sebagai header aplikasi ya mungkin kita akan pasang logo dan tombol untuk logout
bagian no 2 (region:east )
belum terpikir sih.. nanti aja deh sambil jalan (mungkin temen2 ada saran)
bagian no 3 (region:west)
kita akan set sebagai navigasi dari aplikasi berupa Tree
bagion no 4 (region:center)
kita akan jadikan bagaian utama aplikasi, yg berfungsi menampilkan module - module
bagian no 5 (region:south)
sama bagian ini juga blom kepikiran..