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:



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:









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

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 + " *";
        }
        this.originalRenderItem.apply(this, arguments);
    	}
			});

lalu tambahkan css untuk membuat class req menjadi merah

.req{
color:red;
}

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website