Plugin Image Upload pada Html Editor


Notice: A non well formed numeric value encountered in /home/u6060452/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Html editor adalah komponen seperti text area yang berfungsi untuk membuat sebuah konten yang berisi htlm tag. Seperti yang kita ketahui di extJs ada kelas yang mengatur hal ini yaitu kelas htmleditor.

Di htmleditor extjs ini belum adanya fitur image upload/insert image, yaitu suatu fitur untuk memasukan gambar kedalam konten. Maka plugin berikut ini berfungsi sebagai fitur untuk mengupload image dan insert image kedalam kontent.

 
Download

Lanjutkan membaca “Plugin Image Upload pada Html Editor”

Drag Icon Moving Data View

Seperti judulnya adalah drag moving data view yang artinya adalah data view dimana iconnya dapat dipindah-pindahkan sesuai dengan posisi yang diinginkan dengan cara mendrag icon tersebut. Seperti yang kita ketahui contoh sederhana adalah jika ada sebuah aplikasi desktop dimana icon-iconnya dapat di pindah-pindah sesuai yang diinginkan. Itulah gambaran dari Drag Moving Data View.

screenshot

Komponen yang digunakan adalah komponen viewport dan dataview dimana dataview kita letakkan didalam viewport sebagai medianya. Sebelumnya kita sudah mempelajari membuat sebuah data view sederhana dimana perbedaan dengan artikel ini adalah icon-icon di data view akan disusun berdasarkan koordinat x dan y. Perhatikan parameter store dan tpl pada kelas dataView nya.

Lanjutkan membaca “Drag Icon Moving Data View”

Membuat Agenda Kegiatan (Bagian 1)

Kali ini saya akan share aplikasi extjs 4 yaitu Membuat agenda kegiatan. Aplikasi ini saya aplikasi kan kedalam sistem informasi akademik yaitu mengenai Kalender Akademik.

Berikut penampakannya:

kalender_akademik

Untuk melihat live demo bisa kunjungi url berikut:

http://www.kiezie.web.id/demo/agenda_kegiatan/

 

Pada bagian 1 ini baru dapat menampilkan data saja selanjutnya di bagian dua akan ada tambahan fitur yaitu tambah edit dan hapus.

Bagi yang ingin mengembangkan aplikasi ini silahkan bisa di download di:

www.github.com/membuatprogram/agenda_kegiatan

Selamat mencoba!

Autocomplete Combo Box

Sering kali kita melihat web dengan menggunakan fitur autocomplete seperti contohnya google.com atau facebook.com.

google_autocomplete

facebook_autocomplete

 
Dengan melihat contoh diatas berikut ini adalah cara membuat autocomplete menggunakan extjs 4. Dengan memakai komponen Combobox yang ditambahkan dengan parameter-parameter tertentu maka terciptalah Autocomplete Combo Box.

 
Download

Lanjutkan membaca “Autocomplete Combo Box”

Membuka Jendela melalui Html Tag

Jika dialam kode html ada sebuah tag html button sebagai berikut:
<button id=’daftar_1′>Form Pendaftaran</button>
yang tampak seperti:
(Coba diklik tombolnya!)

atau sebuah hyperlink seperti berikut:
<a href=’javascript:void(0);’ id=’daftar_2′>Form Login</a>
yang tampak seperti:
Form Login (Coba diklik linknya!)

Dengan tujuan ingin membuka sebuah jendela baru yang dibuat menggunakan kelas extjs 4 sebagai berikut:

Lanjutkan membaca “Membuka Jendela melalui Html Tag”

Membuat Combo Box Berantai (Chained Combo Box)

Kali ini saya akan memberikan contoh bagaimana membuat combo box berantai. Sebelum nya saya jelaskan dahulu apa itu Combo box berantai. Combo box berantai adalah 2 buah combo box atau lebih dimana list combo box nya berubah bergantung dengan value combo box sebelumnya.

chanedcombo

Lanjutkan membaca “Membuat Combo Box Berantai (Chained Combo Box)”