Education center: extjs tutorial

Home » Posts filed under extjs tutorial

Showing posts with label extjs tutorial. Show all posts

validation in extjs

Extjs javascript framework that is powerful, its elegant UI, simple
This time I will explain some of the excess Extjs owned.

1. Form validation email check

To create an email form on the extjs validation, we can script like here

"vtype:'email'"

contoh: {
xtype:'textfield',//tipenya text
fieldLabel: 'Email',// Nama Labelnya
name: 'email',//nama field sesuai dengan di databse
vtype:'email', // validasi email
anchor:'95%' // lebarnya
}

so, if the writing format of the email wrong, so will display alert as follows

2. Check form can not be empty

to check which can not be empty, we live in extjs using script like this

"allowBlank:false"

example:
{
fieldLabel: 'First Name', //nama label
name: 'first', // nama sesuai dengan nama field di databse
allowBlank:false //g boleh kosong
}

so if the form is empty, then there will be alert as shown below:

3. Check form time

Like the example above prayer to create a form of time, we live called the following command:

"new Ext.form.TimeField"

example:
new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}

if one of those filling out the form, it will appear like the following alert

4. Create html editor

script that is used to display the html editor is as follows:

"xtype:'htmleditor',"

example

{ xtype:'htmleditor', id:'bio', fieldLabel:'Biography', height:200, anchor:'98%' }

5. create tab panel

xtype:'tabpanel',

example

items: { xtype:'tabpanel', activeTab: 0, defaults:{autoHeight:true, bodyStyle:'padding:10px'}, items:[{ title:'Personal Details', layout:'form', defaults: {width: 230}, defaultType: 'textfield', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank:false, value: 'Jack' },{ fieldLabel: 'Last Name', name: 'last', value: 'Slocum' },{ fieldLabel: 'Company', name: 'company', value: 'Ext JS' }, { fieldLabel: 'Email', name: 'email', vtype:'email' }] },{ title:'Phone Numbers', layout:'form', defaults: {width: 230}, defaultType: 'textfield', items: [{ fieldLabel: 'Home', name: 'home', value: '(888) 555-1212' },{ fieldLabel: 'Business', name: 'business' },{ fieldLabel: 'Mobile', name: 'mobile' },{ fieldLabel: 'Fax', name: 'fax' }] }] },

Tutorial Form Grid Extjs : Grouping Extjs

this time I will explain about how to create a grouping or a grouping using extjs. Grouping or clustering is very useful or useful when we want to classify some data or files into the type of data or files or the same kind.

For example grouping students based on class. What goal? it'll be easier in search of data, and can find out the amount of data or files easy. Below is an example screen shot of grouping based on the force I created using extjs.

From the snapshot we can see the amount of each generation.

How do I create a display like the above? If you've never learned before extjs, then I suggest to read my previous posts :Tutorial Form Grid Extjs : Expanded Row, Collapse, dan Icon Grid, because all the data I use refers to the previous tutorial.

Here is the source code is the core of this tutorial:

.............
GrupStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'group.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id',
fields: [ //nama field atau kolom dari database
'id','nama','alamat','angkatan'
]

}),
sortInfo:{field: 'angkatan', direction: "ASC"},//diurutkan berdasarkan urutan angkatan secara ascending
groupField:'angkatan' //dikelompokkan berdasarkan angkatan

});

..........

GrupListingEditorGrid = new Ext.grid.GridPanel({
title: 'Grid Grouping',
store: GrupStore,
cm: GrupColumnModel,
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

frame:true,
collapsible: true,//manggil fungsi collaps
animCollapse: true,//memberikan animasi pada collaps
iconCls: 'icon-grid',//menambahkan icon pada grid
width:430,
height:280,
...........

source code that color is red is the core of this tutorial.

kamu bisa mendownload Source code lengkapnya disni.

Tutorial Form Grid Extjs : Expanded Row, Collapse, dan Icon Grid

This tutorial is a continuation from the first tutorial, so before you read this tutorial I suggest you read the previous tutorial section of the grid: grid extjs tutorial form: paging grid, because the data I use here is the data from the previous grid tutorials

Tutorial ini akan membahas tentang bagaimana caranya membuat Expanded Row, Collapse, dan menambahkannya icon pada Grid. Berikut snaphsot dari tutorial ini:

What is the use Expanded Row? I think it can be used to place additional information, and can also be used to save space page, collapse itself can be used for animation slider.

Here are some of the files needed in this tutorial

1. file index.php

<html>
<head>
<title>Grid</title>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="http:ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http:ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="RowExpander.js"></script>
<script type="text/javascript" src="g_jadi.js"></script>
<style type="text/css">
.icon-grid {
background-image:url(./grid.png) !important;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<div style="height:180px"></div>
<table align="center">
<tr>
<td>
<div id="form"></div>
</td>
</tr>
</table>
</body>
</html>

source code that color is red is an additional source code in this tutorial.

2. g_jadi.js

var NiagaDataStore;
var NiagaColumnModel;
var NiagaListingEditorGrid;

Ext.onReady(function(){
Ext.QuickTips.init();

var expander = new Ext.grid.RowExpander({ //compenen dari expander row
tpl : new Ext.Template(
//dibawah ini adalah field yang ingin diexpand
' '<p><b>Nama:</b> {nama}</p><br>',
'<p><b>Alamt:</b> {alamat}</p><br>',
'<p><b>Tanngal Laporan:</b> {tgl_Laporan}</p><br>'
)
});

NiagaDataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'grid.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'

},

[
{name: 'id', type: 'int'},
{name: 'nama', type: 'string'},
{name: 'alamat', type: 'string'},
{name: 'tgl_Laporan', type: 'string'}

]),
sortInfo:{field: 'id', direction: "ASC"}
});

NiagaDataStore.load({params:{start:0,limit:5}});

//tampilan awal
NiagaColumnModel = new Ext.grid.ColumnModel(
[
expander, //memanggil componen expander
{
header: 'Id',
readOnly: true,
dataIndex: 'id',
width: 40,
hidden: false

},{
header: 'Nama',
dataIndex: 'nama',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Alamat',
dataIndex: 'alamat',
width: 160,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Tanggal Laporan',
dataIndex: 'tgl_Laporan',
width: 120,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
}]
);
NiagaColumnModel.defaultSortable= true;

//tampilan luar
NiagaListingEditorGrid = new Ext.grid.GridPanel({
title: 'Grid Expand',
store: NiagaDataStore,
cm: NiagaColumnModel,
viewConfig: {
forceFit:true
},
plugins: expander,
collapsible: true,//manggil fungsi collaps
animCollapse: true,//memberikan animasi pada collaps
iconCls: 'icon-grid',//menambahkan icon pada grid
width:455,
height:210,

bbar: new Ext.PagingToolbar({
pageSize: 5,
store: NiagaDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})

});

NiagaListingEditorGrid.render('form');

});

source code that color is is the core of this tutorial.

3. RowExpander.js

kamu bisa mendownload source code lengkapnya disini

Tutorial Form Grid Extjs: Paging Grid Extjs

Mumpung lagi ada waktu, saya ingin melanjutkan tutorial tentang extjs, Tutorial ini baru saya buat tadi pagi setelah pulang dari jaga warnet,, Sebenarnya ingin tidur karena sudah ngantuk, tapi entah kenapa nyampek di kosan tidak bisa tidur atau turu kata orang jawa,, padahal temen sekamarku pas saya nyampek kosan kelihatannya nyenyak buanget tidurnya,, dan tau gak sampek jam berapa dia bngun? setengah 1 coy mantap buanget ,, (moga temanku tidak baca blog ini nanti di cerai bisa-bisa saya di cerai hehehe..hehe..). Lho kok malah melenceng dari topik? sory kawan.. :D

Ok kita mulai aja tutorialnya,, kali in buruh internet ongin menjelaskan tentang cara membuat paging grid menggunakan Exjs,, maksud paging disni yaitu mensplit data yang ingin kita tampilkan di web (pemberian nomor) benar nggak? tujuannya sich biar nggak banyak makan space halaman di web kita dan biar enak juga kalau di lihat.

Note: Anda sudah membaca tutorial ku yang sebelumnya: membuat form login dengan extjs ;))

Untuk membut paging grid dengan menggunakan extjs tentunya kamu sudah punya frameworknya, disini saya menggunakan extjs versi ext-2.2,, sepertinya ini masih yang terbaru...

Ini adalah snapshot dari paging extjs yang aq buat:

Berikut langkah-langkah untuk membuat tampilan seperti diatas:

1. Buat database terlebih dahulu, setelah itu buat table, dan fieldnya... nich caranya:

CREATE TABLE `grid` (
`id` int(10) NOT NULL auto_increment,
`nama` varchar(100) NOT NULL,
`alamat` varchar(100) NOT NULL,
`tgl_Laporan` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

INSERT INTO `grid` (`id`, `nama`, `alamat`, `tgl_Laporan`) VALUES
(1, 'faisal', 'gebang wetan', '01/03/1986'),
(2, 'kahayan', 'ponggok blitar', '01/19/1991'),
(3, 'ica', 'ponggok', '01/02/2004'),
(4, 'sanah', 'seduur', '03/04/2005'),
(5, 'kandar', 'ponggok', '03/04/1979'),
(6, 'sirat', 'pakong', '03/05/1976');

2. Kemudian Buatlah file php untuk koneksi ke database.

<?php
$nameSer = "localhost";
$username ="root";
$pass = "";
$dbname = "blog";
$koneksi = mysql_connect($names,$username,$pass)or die('error'.mysql_errno());
$selecdb = mysql_select_db($dbname);
?>

3. Buat file javascriptnya untuk tampilan formnya.
var NiagaDataStore;
var NiagaColumnModel;
var NiagaListingEditorGrid;

Ext.onReady(function(){
Ext.QuickTips.init();
NiagaDataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'grid.php', //manggil file grid.php
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},
[
{name: 'id', type: 'int'},//sesuai nama field yang di database
{name: 'nama', type: 'string'},//sesuai nama field yang di database
{name: 'alamat', type: 'string'},//sesuai nama field yang di database
{name: 'tgl_Laporan', type: 'string'}//sesuai nama field yang di database

]),
sortInfo:{field: 'id', direction: "ASC"}//urut berdasarkan id
});

NiagaDataStore.load({params:{start:0,limit:5}}); //menampilkan data sebayak 5 record

//tampilan awal
NiagaColumnModel = new Ext.grid.ColumnModel( // Tampilan form paging Grid
[{
header: 'Id',
readOnly: true,
dataIndex: 'id',
width: 40,
hidden: false

},{
header: 'Nama',
dataIndex: 'nama',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Alamat',
dataIndex: 'alamat',
width: 160,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Tanggal Laporan',
dataIndex: 'tgl_Laporan',
width: 120,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
}]
);
NiagaColumnModel.defaultSortable= true;

//tampilan luar
NiagaListingEditorGrid = new Ext.grid.GridPanel({
title: 'Form Paging Grid',
store: NiagaDataStore,
cm: NiagaColumnModel, //manggil NiagaColumnModel
width:455,
height:210,

bbar: new Ext.PagingToolbar({ //buat paging
pageSize: 5, batas nya 5
store: NiagaDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})

});

NiagaListingEditorGrid.render('form');

});

4. buat file php untuk request data dari database

<?php
include "koneksi.php";//manggil file koneksi.phpinclude "JSON.php";//manggil file JSON.php
$query = "SELECT * FROM grid"; $result = mysql_query($query); $nbrows = mysql_num_rows($result); $start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']); $end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']); $limit = $query." limit ".$start.",".$end; //echo $limit; $result = mysql_query($limit); if($nbrows>0) { while($rec = mysql_fetch_array($result)) { $rec['tgl_Laporan']=codeDate($rec['tgl_Laporan']); $arr[] = $rec; } $jsonresult = JEncode($arr); echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})'; } else { echo '({"total":"0", "results":""})'; }

// Encodes a SQL array into a JSON formated stringfunction JEncode($arr){ if (version_compare(PHP_VERSION,"5.2","<")) { require_once("JSON.php"); //if php<5.2 need JSON class $json = new Services_JSON();//instantiate new json object $data=$json->encode($arr); //encode the data in json format } else { $data = json_encode($arr); //encode the data in json format } return $data;}
// Encodes a YYYY-MM-DD into a MM-DD-YYYY stringfunction codeDate ($date) { $tab = explode ("-", $date); $r = $tab[1]."/".$tab[2]."/".$tab[0]; return $r;}
// Encodes a MM-DD-YYYY into a YYYY-MM-DD stringfunction decodeDate ($date) { $tab = explode ("/", $date); $n = count($tab); if($n==3) { $r = $tab[2]."-".$tab[0]."-".$tab[1]; } else { $r = ""; } return $r;}?>

5. Dan yang terpenting dari tutorial ini yaitu jangan lupa untuk menyertakan file JSON.php file ini digunakan ketika kita mau request data dari database,, disini kalian g usah pusing-pusing mikirin isi dari file JSON.php ini, karena file ini tinggal qt pakek (di panggil atau di includekan di file php.) file ini bisa di download di sini

Mungkin cukup sekian tutorialnya jika ada pertanyaan silahkan tinggalkan comment.
kamu bisa medownload source code lengkapnya disini

Baca juga cara membuat add, edit dan delete menggunakan extjs dan php.

Membuat form Login dengan Extjs

Download source code login form using extjs

Pada tutorial kali ini buruh internet akan membahas tentang cara membuat login dengan extjs. Disini saya menggunakan PHP untuk proses loginn ke database dan database yang saya gunakan adalah mysql.

Disini saya menganggap teman-teman sudah membaca postingan saya sebelumnya: membuat form upload file dengan menggunakan extjs dan php, dan Free download theme extjs , jadi teman-teman sudah mempunyai file extjsnya (ext-2.2). Dan saya anggap teman- teman dah mengerti cara memanggil file extjs tersebut. Ok lansung aja masuk ke pokok pembahasan. Berikut adalah file yang dibutuhkan dalam membuat form login ini:

1. koneksi.php file ini digunakan untuk koneksi ke databse

<?php
$nameSer = "localhost";
$username ="root";
$pass = "";
$dbname = "login";
$koneksi = mysql_connect($names,$username,$pass)or die('error'.mysql_errno());
$selecdb = mysql_select_db($dbname);
?>

2. index.php file ini digunakan untuk memanggil file extjs dan dan file form login itu sendiri

<html>
<head>
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/xtheme-slate/css/xtheme-slate.css" />
<script type="text/javascript" src="http:ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http:ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div style="height:180px"></div>
<div id="form" align="center"></div>
</body>
</html>

script yang berwarna merah itu urutannya jangan dirubah,, so jika temen-temen merubahnya maka pasti akan ada pesan error yaitu formnya tidak muncul.

3. login.js buat tampilan formnya.

Ext.onReady(function(){
Ext.QuickTips.init();

var login = new Ext.FormPanel({
labelWidth:90,
url:'login.php', //manggil file.php
frame:true,
width:300,
autoHeight:true,
padding:200,
defaultType:'textfield',
monitorValid:true,

items:[{
xtype:'box', //buat naruh gambar icon
autoEl:{
tag:'img',
src:'im48x48.png'
}
},
{
fieldLabel:'Username', //buat ngisi username
name:'username',
allowBlank:false
},{
fieldLabel:'Password', // buat ngisi password
name:'password',
inputType:'password',
allowBlank:false
}],

buttons:[{
text:'Login',

handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Harap Tunggu',
waitMsg:'Mengirim data...',

success:function()
{
Ext.Msg.alert('Status', 'Login Berhasil!', function(btn, text)
{

if (btn == 'ok')
{
var redirect = 'index1.php'; //jika sukses akan di redirec ke index1.php
window.location = redirect;
}
});
},

failure:function(form, action)
{
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Login Failed!', obj.errors.reason);
}
else
{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText + "abcd");
}
login.getForm().reset();
}
});
}
},
{
text: 'Reset',
handler: function(){
login.getForm().reset();
}

}]
});

var createwindow = new Ext.Window({
//frame:true,
title:'Please Login',
width:315,
height:155,
closable: false,
items: login
});

createwindow.show();
});

4.login.php digunkan untuk proses loginnya. mencocokkan data yang dimasukkan user dengan databse.

<?php
session_start();
include "koneksi.php";

$nama = $_POST["username"];
$password = $_POST["password"];
$query = "select * from form where username='$nama' and password='$password'";
$sql = mysql_query($query);
$ada = mysql_fetch_row($sql);

if($ada>1)
{
$_SESSION['nama']=$nama;
echo "{success: true}";
}
else
{
echo "{success: false, errors: { reason: 'Login failed. Try again.' }}";
}
?>

Contoh diatas saya menggunakan session, dan yang saya session disini adalah username. jika login berhasil maka akan di redirect ke ke file index1.php

5. index1.php hanya untuk mengecek login kita berhasil apa tidak

<?php
session_start();
echo "selamat datang " .$_SESSION['nama'];
?>

6. dan yang terakhir adalah code dari sql itu sendiri.

CREATE TABLE `form` (
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

OK saya rasa tutorialnya sudah cukup jelas..

kamu bisa mendownload source code lengkapnya dini

jika ada pertanyaan silahkan meninggalkan comment.

Membuat Form Upload File dengan Extjs dan PHP

Pada tutorial kali ini saya akan menjelaskan tentang bagaimana cara membuat form upload file dengan extjs dan php, file extjs disini digunakan sebagai form tampilannya, form extjs itu sendiri sangat elegan (ini menurut saya sich... coz masalahnya saya g bisa desain), sedangkan file php nya digunakan sebagai proses uplopad file ke database (koneksi ke database dan insert data ke database).

Extjs yang kami gunakan disini adalah extjs versi ext-2.2, karena versi ini sudah mendukung form upload sedangkan versi yang sebelumnya belum mendukung form buat upload.

Berikut ini adalah screen shot dari file-file yang digunakan dalam tutorial kali ini:

Folder artikel ini di gunakan untuk menyimpan file artikel yang di upload.Folder ext-2.2 ini adalah frameworknya ini wajib ada kalo mau menggunkan extjs. Isi dari folder ini adalah sebagai berikut

file-upload.css digunakan untuk mengatur tampilan dari form upload, ini merupakan bawaannya extjs, file ini ada di dalam foder ext-2.2/examples/form.
FileUploadField.js ini nantinya yang akan dipanggil oleh form upload yang kita buat. File ini juga bawaannya extjs, file ini ada di dalam foder ext-2.2/examples/form.
image_add.png adalah image yang digunakan sebagai icon browse.
koneksi.php file ini digunakan untuk koneksi ke database, databse yang kami gunakan disini adalah mysql dan nama database dari tutorial kali ini adalah "blog".

koneksi.php
<?php
$names = "localhost";
$username = "root";
$pass = "";
$dbname = "blog";
$koneksi = mysql_connect($names,$username,$pass)or die('error'.mysql_errno());
$selecdb = mysql_select_db($dbname);
?>

upload.html file ini digunakan untuk memanggil beberapa file extjs termasuk file (file-upload.css, FileUploadField.js dan upload.js)

upload.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/OliveTheme/css/xtheme- olive.css" />
<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.2/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="file-upload.css"/>
<script type="text/javascript" src="FileUploadField.js"></script>
<script type="text/javascript" src="upload.js"></script>

<style>
.upload-icon {
background: url('image_add.png') no-repeat 0 0 !important;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td>
<div id="form"></div>
</td>
</tr>
</table>
</body>
</html>
urutan file yang ad di dalam tag head harus urut, tidak boleh diganti, karena itu adalah aturan dari extjs, kalo di ganti maka error yang akan di dapet (hehehe.. hehehe..)

upload.js ini adalah form utama dari tutorial ini.

upload.js
Ext.onReady(function(){Ext.QuickTips.init();var fp = new Ext.FormPanel({renderTo: 'form',// ini akan di panggil di upload.html
fileUpload: true,width: 300,frame: true,//title: 'File Upload Form',autoHeight: true,bodyStyle: 'padding: 10px 10px 0 10px;',labelWidth: 50,
defaults: {anchor: '95%',allowBlank: false,msgTarget: 'side'},items: [{xtype: 'textfield',name: 'namalaporan',//harus sama engan kolom di di databesefieldLabel: 'Name File'},{xtype: 'fileuploadfield', id: 'form-file', emptyText: 'Select an file', fieldLabel: 'File', name: 'namaFile',//harus sama engan kolom di di databese buttonCfg: { text: '', iconCls: 'upload-icon'//icon buat browse } }], buttons: [{ text: 'Save', handler: function(){ if(fp.getForm().isValid()){ fp.getForm().submit({ url: 'phpupload.php',//akan manggil file phpupload.php ketika tombol save di tekan waitMsg: 'Uploading your photo...', success: function(fp, o){ Ext.MessageBox.alert('Creation OK','Tambah Laporan Berhasil..');//alert ketika proses upload sukses }, failure: function(fp, o){ Ext.MessageBox.alert('Warning','Tambah Laporan Gagal...'); //alert ketika gagal } }); } } },{ text: 'Reset', handler: function(){ fp.getForm().reset(); } }] }); var createwindow = new Ext.Window({ //frame:true, title:'Form Upload', width:315, height:150, closable: false, items: fp//manggil form panel }); createwindow.show(); });

phpupload.php file ini digunakan menginsertkan data ke database

phpupload.php
<?php
include "koneksi.php";
$namaLaporan = $_POST['namalaporan'];
$namaFile = $_FILES['namaFile']['name'];

move_uploaded_file ($_FILES['namaFile']['tmp_name'],"artikel/".$_FILES['namaFile']['name']);
$query = "INSERT INTO upload (`namalaporan`,`namaFile`) VALUES ('$namaLaporan','$namaFile')";

$result = mysql_query($query);
if($result)
{
echo "{success:true}";
}
else
{
echo "{success:false}";
}
?>

penulisan echo diatas harus sperti itu atau bisa dengan cara berikut :

echo '{"success":"true"}';

berikut adalah screen shot dari form upload file:

Kalo proses upload qt sukses maka akan ada alert sebagai beikut:

Dan berikut adalah code sql dari tutorial ini:

CREATE TABLE `upload` (
`namalaporan` varchar(100) NOT NULL,
`namaFile` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Baca juga cara membuat add, edit dan delete menggunakan extjs dan php

download source code lengkapnya disini
via ziddu>

Free Download Theme Exjs

Salam hangat buat para blogger dari Buruh Internet ... pada kesempatan kali ini Buruh Internet akan membagikan sedikit ilmu tentang Extjs Sebenaranya Buruh Internet masih newbie juga dalam pemrograman web ini,,, tapi gak ada salahnya kan kalo Buruh Internet ingin berbagi ilmu (benar kagak?? siks...siks...siks...).

OK Kita langsung masuk aja ke materi... Materi yang akan saya bahas adalah bagaimana caranya mempercantik tampilan (form) dari Extjs. Materi ini cukup simple karena hanya manambahkan satu baris script pada codingan yang kita buat. Yang dimaksud mempercantik disini adalah merubah theme dari Extjs itu sendiri.

Untuk mendapatkan framework javascript ini, kamu bisa mendownloadnya dari websitenya langsung http://www.extjs.com/products/extjs/download.php. Oh ya disini Buruh Internet menggunakan Extjs versi 2.2.

Setelah kamu berhasil mendownloadnya maka tahap selanjutnya adalah sebagai berikut.

Berikut langkah-langkahnya:

Letakkan file extjs yang barusan di download di webserver (disini saya menggunakan xampp karena sudah menyediakan sevice apache dan mysql sekaligus), letakkan dalam folder htdocs, contoh: C:\xampp\htdocs\ext-2.2
Kemudian letakkan theme yang ingin anda gunakan di dalam folder resource, contoh: C:\xampp\htdocs\ext-2.2\resources. Jika temen-temen belum punya theme,, temen-temen bisa mendownloadnya free download theme extjs. Theme ini saya dapatkan dari http://www.extjs.com/
Setelah itu buatlah file misalnya theme.html (ini sebagai contoh saja)

<head>
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/xtheme-vistablack/css/xtheme-vistablack.css" />
<script type="text/javascript" src="http:ext-2.2/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="http:ext-2.2/ext-all.js"> </script>
<script type="text/javascript" src="login.js"> </script>
</head>

Source code yang berwarna warna merah adalah inti dari tutorial ini.. Urutan source code diatas tidak boleh di ganti karena itu udah bawaanya extjs. Pada contoh di atas theme yang saya gunakan adalah xtheme-vistablack. Theme diatas bisa diganti sesuai dengan keinginan temen-temen.
Berikut screenshot dari beberapa theme yang saya dapatkan dari http://www.extjs.com/.

More about extjs theme click here

Free download theme extjs