Membuat halaman login menggunakan ExtJS

Extjs adalah sebuah javascript library untuk membuat aplikasi berbasis web. Extjs mempunyai banyak sekali fungsi yang bisa kita gunakan diantaranya yang sering dipakai adalah window,form dan grid. Beberapa kelebihan Extjs adalah

  • High performance, customizable UI widgets
  • Well designed and extensible Component model
  • An intuitive, easy to use API
  • Commercial and Open Source licenses available

Extjs juga support beberapa browser diantaranya

  • Internet Explorer 6+
  • FireFox 1.5+ (PC, Mac)
  • Safari 3+
  • Chrome 3+
  • Opera 9+ (PC, Mac)

Untuk bisa mendownload Extjs silakan download di sini :bangga:


[ad name=”ad-1″]

Login Extjs

Login

Hal pertama yang dilakukan adalah menginclude/memasukkan javascript dan css yag diperlukan oleh Extjs. dalam hal ini saya menambahkan css olivetheme untuk membuat tampilan default extjs yang biu menjadi hijau. untuk mendownload theme extjs yang lain silakan download disini :bangga:

[javascript]
<!– Import CSS –>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="/css/xtheme-olive.css" />
<script type="text/javascript" src="/js/ext-base.js"></script>
<!– ENDLIBS –>
<script type="text/javascript" src="/js/ext-all.js"></script>

<script>
Ext.onReady(function(){

Ext.QuickTips.init();

Ext.apply(Ext.layout.FormLayout.prototype, {
originalRenderItem:Ext.layout.FormLayout.prototype.renderItem,
renderItem:function(c, position, target){
if(c && !c.rendered && c.isFormField && !c.allowBlank && c.inputType!==’hidden’) {
c.fieldLabel = c.fieldLabel + " <span class=\"req\">*</span>";
}
this.originalRenderItem.apply(this, arguments);
}
});

// Create a variable to hold our EXT Form Panel.
// Assign various config options as seen.
var login = new Ext.FormPanel({
labelWidth:90,
url:’/index/login’,
frame:true,
title:’Please Login’,
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
xtype:’box’, //buat naruh gambar icon
autoEl:{
tag:’img’,
src:’/images/login.png’
}
},{
fieldLabel:’Username’,
anchor:’90%’,
xtype: ‘textfield’,
name:’loginUsername’,
allowBlank:false
},{
fieldLabel:’Password’,
anchor:’90%’,
name:’loginPassword’,
xtype: ‘textfield’,
inputType:’password’,
allowBlank:false
}

],
buttonAlign: ‘center’,
// All the magic happens after the user clicks the button
buttons:[{
text:’Login’,
id:’login_button’,
formBind: true,
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({
method:’POST’,
waitTitle:’Connecting’,
waitMsg:’Sending data…’,
success:function(form, action){
var redirect = ‘/index’;
window.location = redirect;
//alert(‘tes’);
},
failure:function(form, action){
if(action.failureType == ‘server’){
Ext.Msg.alert(‘Login Failed!’, ‘Login gagal pastikan username dan password anda benar’);
}else{
Ext.Msg.alert(‘Warning!’, ‘Authentication server is unreachable : ‘ + action.response.responseText);
}
login.getForm().reset();
}
});
}
}] ,
keys: [{ key: [13], fn: function() {
//login_button.focus();
Ext.getCmp(‘login_button’).focus(true);
//login_button.fireEvent("click", login);
}}]
});

// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
layout:’fit’,
width:400,
height:200,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});

</script>
[/javascript]

Untuk membuat field yang mandatory/required terdapat tanda *(bintang) maka kita harus menambahkan / Extend dari class extjs seperti dibawah ini

[javascript]
Ext.apply(Ext.layout.FormLayout.prototype, {
originalRenderItem:Ext.layout.FormLayout.prototype.renderItem,
renderItem:function(c, position, target){
if(c && !c.rendered && c.isFormField && !c.allowBlank && c.inputType!==’hidden’) {
c.fieldLabel = c.fieldLabel + " <span class=\"req\">*</span>";
}
this.originalRenderItem.apply(this, arguments);
}
});
[/javascript]

lalu tambahkan css untuk membuat class req menjadi merah

[css]
.req{
color:red;
}
[/css]

untuk membuat form maka kita harus membuat objek dari formpanel. dalam objek form terdapat atribut url yang digunakan untuk menentukan url setelah klik submit button. monitorvalid digunakan untuk mengenable atau disable submit button ketika semua form yang required diisi semua.

atribut items digunakan untuk memasukkan elemen yang terdapat pada form.untuk melihat jenis-jenis items bisa dilihat di sini. saya menggunakan xtype box untuk menambahkan icon user login kedalam form.

Window digunakan untuk membungkus/menampung object form yang tadi telah dibuat. sesuaikan width dan height sesuai selera.

silakan mencoba

Dec08

Leave a Reply