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.





































Comments









  1. BJuserDecember 17, 2012 at 11:02 PM
    gan, yang sudah terkoneksi database ada tidak?
    ReplyDelete
  2. RifaiJanuary 21, 2013 at 3:19 PM
    ada..
    cuma 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..
    ReplyDelete
  3. membuatprogramMarch 19, 2013 at 4:33 PM
    Lihat contoh-contoh extjs 4 disini www.membuatprogram.com
    ReplyDelete











Post a Comment



















Popular posts from this blog









Belajar ExtJS Dasar




















Image







Ext JS  adalah Sebuah Framwork Dengan Bahasa javascript yang digunakan untuk mempermudah pembuatan APlikasi Berbasis Website yang hamper menyerupai aplikasi berbasis Dekstop.  ExtJS merupakan Framework yang sangat tepat untuk pembuatan Aplikasi berbasis website,karena  dengan Adanya Ajax di  Framework ini sehingga untuk Transfer ataupun Request data pada aplikasi yang nantinya kita buat bias lebih cepat dan bekerja di belakang atau tanpa harus Meloading keseluruhan Page dari aplikasi yang kita buat. Extjs juga sudah menyediakan File - file yang kita butuhkan seperti CSS , Icon dan yang paling Penting Documentasi yang sangat Lengkap, dari Guide, Contoh dan  Materi berupa Video.  Sebelum Memulai Coding dan bermain dengan script – script ExtJS sebelumnya kita harus memahami dan mengatahui beberapa hal terlebih dahulu.  Requirements / Persyaratan  1. Web Browser Ext JS  Mendukung Semua Browser yang Terkenal dari  I-6, Google Crome yang terdahulu. Tapi direkomendasikan agar kita menggunakan...








Read more










Fungsi PHP untuk menghitung selisih atau jarak 2 tanggal




















Image







  Menghitung selisih atau jarak antara 2 tanggal bukanlah hal sulit menggunakan script PHP. tapi itu setelah saya menemukan script ini ... ini sudah lama saat saya sedang mengerjakan suatu aplikasi dan ternyata terdapat beberapa bagian yg mengharuskan menghitung jarak antara 2 tanggal menggunakan script php.   bukannya plagiat, tapi saya hanya ingin berbagi semoga ada yg merasa membutuhkan dan terbantu.  dan bagi yang tau sumbernya juga boleh ditulis.. karena fungsi ini bukan saya yang membuat saya hanya tinggal memanfaatkannya, :-)   yah langsung aja, pasti kalo temen - temen lagi baca udah ga sabar :    <?php    // Set timezone    date_default_timezone_set("UTC");     // Time format is UNIX timestamp or    // PHP strtotime compatible strings    function dateDiff($time1, $time2, $precision = 6) {      // If not numeric then convert texts to unix timestamps      if (!is_int($time1)) {        $time1 = strtotime($time1);  ...








Read more










Session pada Code Igniter




















Image







  Autentikasi adalah suatu mekanisme  untuk mengatur hak akses suatu halaman web, biasanya diawali dengan adanya  proses login. Dimana user diminta menginput user id dan password. Jika berhasil  login kamu berhak masuk ke suatu halaman, jika tidak..anda tidak akan bisa  masuk ke halaman tersebut  Session adalah sebuah varibel  sementara yang diletakkan di server. Di mana PHP bisa mengambil nilai yang  tersimpan di server walaupun kita membuka halaman baru. Biasanya session akan  hilang jika kamu menutup browser.  Sebelum kamu menggunakan fungsi –  fungsi tentang session di CI kamu hrus memanggil library session terlebih  dahulu dengan cara :  $this->load->library('session');  Selanjutnya cara kita membuat atau  memasukan nilai ke variabel sementara atau session :  $this->session->set_userdata('some_name',  'some_value');  Atau bisa juga dengan menggunakan arra :  $newdata =  array(                   ...








Read more