Membuat Form di Ext JS
Selanjutnya Kita akan Muali Bermain dengan Code – Code ExtJS, kita akan mencoba membuat form seperti gambar dibawah :
Selain Botton ada juga Cycle dan Split
Ext.create('Ext.button.Cycle', {
showText: true,
prependText: 'View as ',
renderTo: Ext.getBody(),
menu: {
id: 'view-type-menu',
items: [{
text: 'text only',
iconCls: 'view-text',
checked: true
},{
text: 'HTML',
iconCls: 'view-html'
}]
},
changeHandler: function(cycleBtn, activeItem) {
Ext.Msg.alert('Change View', activeItem.text);
}
});
Ext.create('Ext.button.Split', {
renderTo: Ext.getBody(),
text: 'Options',
// handle a click on the button itself
handler: function() {
alert("The button was clicked");
},
menu: new Ext.menu.Menu({
items: [
// these will render as dropdown menu items when the arrow is clicked:
{text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
{text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}
]
})
});
Membuat Form Menggunakan Ext JS
1. Textfield
Ext.create('Ext.form.Panel',{
renderTo : Ext.getBody(),
title : 'pembuatan form',
width : 400,
height : 200,
bodyPadding: 10,
items :[{
xtype : 'textfield',
name : 'nama',
fieldLabel : 'masukan nama'
}]
});
Atau textfield khusu Date
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
maxValue: new Date() // limited to the current date or prior
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: new Date() // defaults to today
}]
}); 
Dan Berikut Contoh Script Lengkap pembuatan Form di Ext JS
hasilnya akan seperti diatas:
<!DOCTYPE html>
<html>
<head>
<title>Ext JS Grid Panel - Renderers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='css/ext-all.css' type='text/css' rel='stylesheet' />
<script type="text/javascript" src='js/ext-all.js'></script>
<script type='text/javascript'>
Ext.onReady(function(){
var states = Ext.create('Ext.data.Store', {
fields: [ 'agama'],
data : [{"agama":"Islam"},
{"agama":"Hindhu"},
{"agama":"Budha"}
]
});
Ext.create('Ext.form.Panel',{
renderTo : Ext.getBody(),
title : 'Latihan Membuat Form',
width : 400,
height : 'auto',
bodyPadding : 10,
margin : 5,
buttons : [{
text: 'Clear',
handler: function() {
this.up('form').getForm().reset();
}
},{
text: 'Simpan',
handler: function() {
this.up('form').getForm().submit();
}
}
],
items :[{
xtype : 'textfield',
name : 'nama',
fieldLabel : 'Nama '
},{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Tanggal Lahir ',
name: 'from_date',
maxValue: new Date() //limited to the current date or prior
},
{
xtype : 'fieldcontainer',
fieldLabel : 'Jenis Kelamin',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [
{
boxLabel : 'Laki - Laki',
name : 'size',
inputValue: 'l',
id : 'radio2'
}, {
boxLabel : 'Perempuan',
name : 'size',
inputValue: 'xl',
id : 'radio3'
}
]
},{
xtype: 'combo',
fieldLabel: 'Pilih Agama',
store: states,
queryMode: 'local',
displayField: 'agama',
valueField: 'agama',
},
{
xtype: 'fieldcontainer',
fieldLabel: 'Hobby',
defaultType: 'checkboxfield',
items: [
{
boxLabel : 'Baca Buku',
name : 'topping',
inputValue: '1',
id : 'checkbox1'
}, {
boxLabel : 'Bermain Catur',
name : 'topping',
inputValue: '2',
checked : true,
id : 'checkbox2'
}, {
boxLabel : 'Berenang',
name : 'topping',
inputValue: '3',
id : 'checkbox3'
}]
},{
xtype : 'textareafield',
grow : true,
name : 'message',
fieldLabel: 'Message',
anchor : '100%'
}
]
});
});
</script>
</head>
<body>
</html>
sebelumnya ingat ganti URL ke 2 file ext-all.css dan ext-all.js
sesuai letak di web root kalian.
gan, yang sudah terkoneksi database ada tidak?
ReplyDeleteada..
ReplyDeletecuma saya pake extjs + framework CI jadi belum pakke yang murni meski intinya sama..
extjs + database ngga beda. tetep seperti pembuatan web lainnya. hanya perlu belajar JSON untuk transfer data mas..
Lihat contoh-contoh extjs 4 disini www.membuatprogram.com
ReplyDelete