Tutorial ExtJs 4 – Bab I

Assalamu’ alaikum wr wb

 

Jumpa kembali dengan mbahsomo, sebelumnya saya ucapkan “Mohon Maaf Lahir Dan Batin”

Ok Dah Seperti bisanya langsung pada permasalahan, pada ExtJs 4 banyak sekali terdapat perubahan pada beberapa object komponen yang di gunakan, terutama pada cara load, object atau create,

misal kalo dulu kita biasa menggunakan misal :

 

var win = new Ext.Window({});

pada ExtJs 4 di sarankan untuk menggunakan

var win = Ext.create();

 

dengan sara kita harus import dulu object yang ada, ini hampir mirip dengan penggunakan pada java aplikasi.

Beberapa tools yang dibutuhkan

 

ExtJs 4 => http://www.senca.com/

Editor terserah mau menggunakan Apa [saya menggunakan netbeans].

Kopikan hasil download ExtJs4 kamu di home:

xampp windows = c:/xampp/htdocs/

xampp linux = /opt/lampp/htdocs/

apache linux = /var/www/

dan juga tergantung instalasi anda advanced instalasi.

 

Buat proect baru di home apachenya misal latihanextjs, kemudian buat sebuah file index.html

tulis script di bawah ini:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Latihan Crud</title>

<link rel=”stylesheet” type=”text/css” href=”http://latihan.lokal.com/ext-4.0.0/resources/css/ext-all.css” />

<script type=”text/javascript” src=”http://latihan.lokal.com/ext-4.0.0/bootstrap.js”></script>

<script type=”text/javascript”>

 

//Untuk import object yang akan di butuhkan

Ext.require([

‘Ext.grid.*’]);

Ext.onReady(function() {

Ext.QuickTips.init();

//Membuat data store

//Dengan memanfaatkan ajax proxy

var storeGrid = Ext.create(‘Ext.data.Store’,{

model: ‘treeMenu’

,proxy: {

type: ‘ajax’

,url : ‘<?php echo base_url() . ‘ambildata.php’ ?>’

,noCache    : false

,params     : Ext.encode({

start   : 0

,limit  : 20

})

,actionMethods  : ‘POST’

,reader: {

type: ‘json’

,root: ‘response’

,totalProperty: ‘jumlah’

,idProperty: ‘MN_ID’

}

}

,autoLoad: true

,sorters: [{

property    : ‘MN_ID’,

direction   : ‘ASC’

}]

});

 

//Membuat grid

var grid = Ext.create(‘Ext.grid.Panel’, {

store: storeGrid

,columns: [

{ header: ‘NAMA’,width: 200,sortable: true,dataIndex: ‘MN_NAME’}

,{ header: ‘LINK’,width: 100,sortable: true,dataIndex: ‘MN_LINK’}

,{ header: ‘PARENT’,width: 100,sortable: true,dataIndex: ‘MN_PARENT’}

,{ header: ‘GROUP’,width: 100,sortable: true,dataIndex: ‘MN_GRP’}

,{ header: ‘URUTAN’,width: 100,sortable: true,dataIndex: ‘MN_SORT’}

,{ header: ‘STATUS’,width: 100,sortable: true,dataIndex: ‘MN_STATUS’}

,{ header: ‘ICON’,width: 100,sortable: true,dataIndex: ‘MN_ICON’}

,{ header: ‘TYPE’,width: 100,sortable: true,dataIndex: ‘MN_TYPE’}

]

,height: 350

,selModel : smGrid

,width: 600

,title: ‘GRID’

,renderTo: ‘grid’

,viewConfig: {

stripeRows: true

}

,bbar: new Ext.PagingToolbar({

pageSize    : 20

,store      : storeGrid

,displayInfo: true

,displayMsg : ‘Data yang ada {0} – {1} Dari {2}’

,emptyMsg   : “Tidak ada data”

})

});

});

</script>

</head>

<body>

<div id=”grid”></id>

</body>

</html>

Keterangan : pada script di atas sudah terlihat beberapa perbedaanya kan monggo di lanjut untuk script phpnya

script ambildata.php

$host = “localhost”;

$userdb = “root”;

$passdb = “toor”;

$dbname = “db_cart”;

$conn = mysql_connect($host,$userdb,$passdb) or die (‘Belum terkoneksi mysql’);

mysql_select_db($dbname,$conn) or die ($dbname.’ Tidak ditemukan di mysql’);

$query=”SELECT * FROM tb_tree_menu”;

$hasil=mysql_query($query);

$query1=”SELECT count(*) as jml FROM tb_tree_menu”;

$hasil1=mysql_query($query1);

 

if ($hasil) {

$data=mysql_fetch_array($hasil);

$data1=mysql_fetch_array($hasil1);

$arr_value = array(

‘response’ => $data

, ‘jumlah’ => $data1[0][‘jml’]

);

echo json_encode($arr_value);

}

 

Ok selamat mencoba nanti akan dilanjut pada BAB Selanjutnya

Wassalamu’ alaikum wr wb

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »