Membuat Message Box Di Extjs
15
Membuat Message box di extjs Tinggalkan sebuah balasan Anda semua pasti pernah melihat message box, tapi untuk mengingatkan kembali ingatan anda saya coba mendefinisikan. Message box adalah kotak pesan yang menampilkan peringatan atau perintah pada Sebuah Aplikasi. Contoh 1 : kita akan mencoba membuat sebuah message box dengan info selamat pagi. sintax : <html> <head> <link rel="stylesheet" type="text/css" href="app/default.css"/> <link rel="stylesheet" type="text/css" href="app/GridSummary.css"/> <link rel="stylesheet" type="text/css" href="app/file-upload.css"/> <link rel="stylesheet" type="text/css" href="app/ProgressColumn.css"/> <link rel="stylesheet" type="text/css" href="app/grid-examples.css"/> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="extjs/ext-all-debug.js"></script> <script> Ext.onReady(function(){ Ext.Msg.alert('Info','Selamat Pagi'); }); </script> </head> <body> </body> </html> Hasil : Selamat mencoba… contoh 2: pada kasus selanjutnya kita akan sisipkan sebuah fungsi/function di dalam messagebox,
-
Upload
subandi-wahyudi -
Category
Documents
-
view
44 -
download
1
Transcript of Membuat Message Box Di Extjs
Membuat Message box di extjs
Tinggalkan sebuah balasan
Anda semua pasti pernah melihat message box, tapi untuk mengingatkan kembali ingatan anda saya coba mendefinisikan.
Message box adalah kotak pesan yang menampilkan peringatan atau perintah pada Sebuah Aplikasi.
Contoh 1 : kita akan mencoba membuat sebuah message box dengan info selamat pagi.
sintax :
<html><head><link rel="stylesheet" type="text/css" href="app/default.css"/><link rel="stylesheet" type="text/css" href="app/GridSummary.css"/><link rel="stylesheet" type="text/css" href="app/file-upload.css"/><link rel="stylesheet" type="text/css" href="app/ProgressColumn.css"/><link rel="stylesheet" type="text/css" href="app/grid-examples.css"/><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/><script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script><script type="text/javascript" src="extjs/ext-all-debug.js"></script><script>Ext.onReady(function(){Ext.Msg.alert('Info','Selamat Pagi');});</script></head><body></body></html>
Hasil :
Selamat mencoba…
contoh 2:pada kasus selanjutnya kita akan sisipkan sebuah fungsi/function di dalam messagebox, disini kita akan membuat sebuah variabel penjumlahan dimana ketika pesan muncul maka akan menjumlahkan isi dari variabel penjumlahan tersebut, di sini kita asumsikan variable penjumlahan yang kita isikan ialah 20 dan 10 maka seharusnya hasil yang di tampilkan ialah 30.
Sintax :
<html> <head> <link rel="stylesheet" type="text/css" href="app/default.css"/> <link rel="stylesheet" type="text/css" href="app/GridSummary.css"/>
<link rel="stylesheet" type="text/css" href="app/file-upload.css"/> <link rel="stylesheet" type="text/css" href="app/ProgressColumn.css"/> <link rel="stylesheet" type="text/css" href="app/grid-examples.css"/> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="extjs/ext-all-debug.js"></script> <script> Ext.onReady(function(){ var jumlahkan = function(a, b) { return a+b; } Ext.Msg.alert('Info',jumlahkan(10, 20)); }); </script> </head> <body> </body> </html>
Hasil :
selamat mencoba…
contoh 3:pada kasus ini kita akan mencoba membuat sebuah messagebox dengan di sisipkan tombol yes, no , dan cancel di mana ketika kita menekan salah satu tombol akan muncul messagebox sebagai respon.
Sintax:
<html> <head> <link rel="stylesheet" type="text/css" href="app/default.css"/> <link rel="stylesheet" type="text/css" href="app/GridSummary.css"/> <link rel="stylesheet" type="text/css" href="app/file-upload.css"/> <link rel="stylesheet" type="text/css" href="app/ProgressColumn.css"/> <link rel="stylesheet" type="text/css" href="app/grid-examples.css"/> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="extjs/ext-all-debug.js"></script> <script> Ext.onReady(function() Ext.Msg.show({ title: 'Pertanyaan', msg: 'Anda Sehat ?', buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION, maxWidth: 200, fn: function(btn){ Ext.Msg.alert( 'Jawaban', btn == 'yes' ? 'Alhamdulilah' : 'Kenapa' ); } }); }); </script> </head> <body> </body> </html>
Hasil :
Hasil ketika kita tekan tombol Yes:
Hasil ketika kita tekan tombol No :
Selamat mencoba..
Contoh 4:contoh terakhir kita akan mencoba membuat messagebox dengan kondisi kita harus melakukan penginputan kemudian ketika menekan tombol yes akan muncul messagebox Halo plus kata yang kita inputkan…
Sintax :
<html> <head> <link rel="stylesheet" type="text/css" href="app/default.css"/> <link rel="stylesheet" type="text/css" href="app/GridSummary.css"/> <link rel="stylesheet" type="text/css" href="app/file-upload.css"/> <link rel="stylesheet" type="text/css" href="app/ProgressColumn.css"/> <link rel="stylesheet" type="text/css" href="app/grid-examples.css"/> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script> <script> Ext.onReady(function(){ Ext.Msg.prompt('Input', 'Siapa Nama Anda?', function(btn,text){ Ext.Msg.alert('Info', 'Halo ' + text); }); }); </script> </head> <body> </body> </html>
Hasil :
kemudian kita ketikan Admin lalu tekan OkHasil :
Selamat Mencoba…
Membuat Windows di Extjs
Tinggalkan sebuah balasan
Dalam membuat windows ada beberapa istilah yang harus di ketahui diantaranya:
vbox & hbox : ketika kita memilih type layout v box maka tampilan di window kita menjadi vertikal sedangkan ketika kita memilih hbox maka tampilan windows akan berubah menjadi horizontal.
flex : flex di gunakan untuk memberikan perbandingan luas antara dua buah atau lebih windows.
Sintax :
12345678910111213141516171819202122232425262728293031323334353637
<html><head><link rel="stylesheet" type="text/css" href="app/default.css"/><link rel="stylesheet" type="text/css" href="app/GridSummary.css"/><link rel="stylesheet" type="text/css" href="app/file-upload.css"/><link rel="stylesheet" type="text/css" href="app/ProgressColumn.css"/><link rel="stylesheet" type="text/css" href="app/grid-examples.css"/><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/><script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script><script type="text/javascript" src="extjs/ext-all-debug.js"></script><script>Ext.onReady(function() { var win = new Ext.Window({ title: 'My Window', layout:{ type: 'vbox', align:'strech', }, items: [{ xtype: 'panel', flex: 1, html: 'panel atas pertama', },{ xtype: 'panel', flex: 1, html: 'panel bawah pertama', }], width: 300, height: 400 }); win.show();});</script></head><body></body></html>
4.1.1 Membuat Form Window Extjs
MyDesktop.GridWindow = Ext.extend(Ext.app.Module, { id:'grid-win', init : function(){ this.launcher = { text: 'Grid Window', iconCls:'icon-grid', handler : this.createWindow, scope: this } },
createWindow : function(){ var desktop = this.app.getDesktop(); var win = desktop.getWindow('grid-win'); if(!win){ win = desktop.createWindow({ id: 'grid-win', title:'Grid Window', width:740, height:480, iconCls: 'icon-grid', shim:false, animCollapse:false, constrainHeader:true,
layout: 'fit', items: new Ext.grid.GridPanel({ border:false, ds: new Ext.data.Store({ reader: new Ext.data.ArrayReader({}, [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'} ]), data: Ext.grid.dummyData }), cm: new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header: "Company", width: 120, sortable: true, dataIndex: 'company'}, {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: "Change", width: 70, sortable: true, dataIndex: 'change'}, {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'} ]),
viewConfig: { forceFit:true }, //autoExpandColumn:'company',
tbar:[{ text:'Add Something',
tooltip:'Add a new row', iconCls:'add' }, '-', { text:'Options', tooltip:'Blah blah blah blaht', iconCls:'option' },'-',{ text:'Remove Something', tooltip:'Remove the selected item', iconCls:'remove' }] }) }); } win.show(); }});
4.1.2 Grid Extjs
Sch.GridSiswa = new Ext.grid.EditorGridPanel ({ //height : 438, store: Ext.grid.DataSiswa, cm: Ext.data.columnDataSiswa, autoScroll: true, style: {padding: 5}, id: 'gridsiswa', trackMouseOver: true, selModel: new Ext.grid.RowSelectionModel({singleSelect:true}), tbar: [ { text: 'Hapus Siswa', iconCls:'delete' ,handler: function(){Ext.deleteSiswa();} }, '-', { text: 'Full Data', iconCls:'cari' ,handler : function(){Sch.GridSiswa.reconfigure(Ext.grid.DataSiswa, Ext.data.columnDataSiswa) Ext.grid.DataSiswa.reload();} }, '->', { xtype : 'combo', width : 100, id : 'cmbCari', store : [ 'NIS', 'Nama', 'Kelas', 'Alamat' ], //allowBlank: false, typeAhead: true, triggerAction: 'all', mode: 'local', forceSelection: true, displayField: 'type', valueField: 'id', lazyRender:true, allowBlank: false }, '-', { xtype: 'textfield' ,id : 'txtCari' ,width : 100 ,allowBlank : false ,listeners: { specialkey: function(f,e){ if (e.getKey() == e.ENTER) { Sch.fn.searchSiswa(); }
} } }, '-', { text: 'Cari', iconCls:'cari' ,handler : function(){if (Ext.ValidCari() == true) { Sch.fn.searchSiswa(); } else { Ext.Msg.show({title: 'Kesalahan',msg: 'Jenis Pencarian Kosong', buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.WARNING });} } }, '-' ], bbar: new Ext.PagingToolbar({ pageSize: 20, store: Ext.grid.DataSiswa, displayInfo: true }) ,listeners: {click: function(){Ext.BinInfo();} ,afteredit : function(){Sch.fn.updateSiswa()} ,'rowcontextmenu' : function(grid, index, event) { showMenu(grid, index, event); } } //selModel: Ext.extend(Ext.grid.RowSelectionModel, {singleSelect:true}) }); // eo extendExt.reg('gridsiswa', Sch.GridSiswa);
Membuat Form Panel Sederhana dengan ExtJS 4
Melanjutkan posting sebelumnya tentang Membuat Window dengan ExtJS 4 , Kali ini kita akan menggabungkan Window tersebut dengan Form Panel.
Class Form Panel adalah Ext.form.Panel(). Class ini harus di instansiasi seperti halnya Ext.window.Window() seperti yang sudah dibahas sebelumnya.
Bila tanpa menggunakan window sebagai containernya (tempat menaruh component), Form Panel dapat juga dirender langsung menggunakan fungsi render().
Berikut adalah contoh codenya:
- See more at: http://blog.khodam.org/extjs/membuat-form-panel-sederhana-dengan-extjs-4.php#sthash.rU0uydJd.dpuf
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title id="page-title">Hello Panel</title>
<!-- script location http://localhost/extJS/belajar/panel.html!-->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"><script type="text/javascript" src="../ext-all.js"></script><script type="text/javascript">
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';Ext.onReady(function(){
var form = Ext.create('Ext.form.Panel', {layout : 'form',defaultType : 'textfield',frame : true,items: [
{fieldLabel: 'First Name',afterLabelTextTpl: required,name: 'first',anchor: '100%',allowBlank: false
},{fieldLabel: 'Last Name',afterLabelTextTpl: required,anchor: '100%',name: 'last',allowBlank: false
}]
});var window = Ext.create('Ext.window.Window', {
title : 'Hello Window',width : '75%',items : [form]
});window.show();//Menculkan Window
});</script>
</head><body></body></html>
Bila menggunakan fungsi render():
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title id="page-title">Hello Panel</title>
<!-- script location http://localhost/extJS/belajar/panel.html!-->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"><script type="text/javascript" src="../ext-all.js"></script><script type="text/javascript">
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';Ext.onReady(function(){
var form = Ext.create('Ext.form.Panel', {layout : 'form',defaultType : 'textfield',frame : true,items: [
{fieldLabel: 'First Name',afterLabelTextTpl: required,name: 'first',anchor: '100%',allowBlank: false
},{fieldLabel: 'Last Name',afterLabelTextTpl: required,anchor: '100%',name: 'last',allowBlank: false
}]
});form.render(document.body);
});</script>
</head><body></body></html>
