Apr 112013
 

Tutorial ExtJs 4 Bagian 1 (Panel and menu)

ExtJs

ExtJs

Assalamu’alaikum wr wb

Lama tidak menggunakan ExtJs sekarang mari kita pelajari kembali penggunaan ExtJs 4 untuk pertama kali mari kita pemanasan dengan memanfaatkan panel dan membuat menu dengan menggunakan ExtJs 4.

Seperti biasa berikut adalah contoh script sederhana yang kita buat. Pertama buatlah file html

<html>
	<head>
		<title>Theme Ext</title>
		<link rel="<a>stylesheet</a>" href="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/css/style.css">assets/css/style.css</a>" type="<a>text/css</a>" />
		<link rel="<a>stylesheet</a>" type="<a>text/css</a>" href="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/css/resources/css/ext-all.css">assets/css/resources/css/ext-all.css</a>"/>

		<!-- Load ExtJs -->
		<script type="<a>text/javascript</a>" src="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/js/extjs/bootstrap.js">assets/js/extjs/bootstrap.js</a>"></script>
		<script type="<a>text/javascript</a>" src="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/js/layout.js">assets/js/layout.js</a>"></script>

	</head>
	<body>
		<div class="<a>container</a>">
			<div class="<a>span-24 header</a>">
				Sugik Puja Kusuma
			</div>
			<div class="<a>span-24</a>" id="<a>main-panel</a>">
			</div>
		</div>
	</body>
</html>

Setlah itu buat file css style.css

.container {width:950px;margin:0 auto;}
.span-24 {width:950px;margin-right:0;}
.header{
	background-color :green;
	font: normal 12px Arial, Helvetica, Sans-serif;
	color : white;
	margin-top : 10px;
	height : 50px;
}

#main-content-body{
	margin : 5px 5px  5px 5px;
}

Langkah terakhir adalam membuat file layout.js

Ext.require([
    'Ext.panel.Panel',
    'Ext.menu.*',
    'Ext.data.*'
]);
Ext.onReady(function(){

	Ext.create('Ext.panel.Panel', {
        title: 'Admin Aplikasi',
        layout: 'border',
        anchor: '100%',
		height : 700,
        tbar  : [
			{
				text : 'Home' ,
				listeners: {
					click : function (){
						window.location = 'http://lokal.com/latihan/theme-ext/';
					}
				}
			},'-',
			{
				text : 'Master' ,
				menu: [
                    {
						text: "Menu Item 1" ,
						listeners: {
							click : function (){
								Ext.get('main-content').load({
									url:'terima.php',
									scripts:true,
									nocache: true,
									params:{
										kode:'123'
									}
								});
							}
						}
					}
                ]
			},
			{
				text : 'Transaksi' ,
				menu: [
                    {
						text: "Menu Item 1"
					}
                ]
			},
			{
				text : 'Laporan' ,
				menu: [
                    { text: "Menu Item 1" }
                ]
			}
        ],
        renderTo: 'main-panel',
		items : [
			{
				region: 'west',
				title: 'Menu',
				width: 200,
				split: true,
				collapsible: true,
				floatable: true
			},
			{
				region: 'center',
				xtype: 'tabpanel',
				items: [{
					title: 'Content',
					id : 'main-content',
					html: 'Hello world 1',
					scripts: true
				}]
			}
		]
    });
});

Oke selesai, semoga bermanfaat

Download Source code

wassalamu’alaikum wr wb

May 272010
 

Assalamu’ alaikum wr wb

Bagi yang sedang belajar ExtJs ini adalah tutorial dasar untuk pembuatan Panel dan Form dengan ExtJs dan php. semoga bermanfaat .

Download

Wassalamu’ alaikum wr wb

Dec 282009
 

Assalamu’ alaikum wr wb

Beberapa hari yang lalu ad seorang teman bertanya kepada saya gimana cara membuat program upload dengan AJAX dan php, setelah beberapa waktu baru hari ini luang.

Langsung pada permasalahan buat sebuah fodler pada htdocs kamu misal : latihanUpload pertama – tama buat script seperti di bawah ini :


<html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script language="javascript">
 //Buat object untuk Ajax
 var http=createRequestObject();
 var uploader="";
 var uploadDir="";
 var dirname="";
 var filename="";
 var timeInterval="";
 var idname="";
 var uploaderId="";

 function createRequestObject() {
 var browser = navigator.appName;
 if(browser == "Microsoft Internet Explorer"){
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
 else{
 return new XMLHttpRequest();
 }
 }
 //Untuk upload
 function traceUpload() {
 http.onreadystatechange = handleResponse;
 http.open("GET", 'imageupload.php?uploadDir='+uploadDir+'&dirname='+dirname+'&filename='+filename+'&uploader='+uploader);
 http.send(null);
 }

 function handleResponse() {
 if(http.readyState == 4){
 var response=http.responseText;
 if(response.indexOf("File uploaded") != -1){
 clearInterval(timeInterval);
 //document.getElementById('loading'+idname).innerHTML="";
 }
 document.getElementById(uploaderId).innerHTML=response;
 }
 else {
 document.getElementById(uploaderId).innerHTML="Uploading File. Please wait...";
 }
 }
 //Pemanggilan pertama pada fungsi upload
 function uploadFile(obj, dname) {
 uploadDir=obj.value;
 idname=obj.name;
 dirname=dname;
 filename=uploadDir.substr(uploadDir.lastIndexOf('\\')+1);
 uploaderId = 'uploader'+obj.name;
 uploader = obj.name;
 document.getElementById('formName'+obj.name).submit();
 timeInterval=setInterval("traceUpload()", 1500);
 }
 </script>
 </head>
 <body>
 <form id="formNameid1" method="post" enctype="multipart/form-data" action="imageupload.php?dirname=" target="iframeid1">
 <input type="hidden" name="id" value="id1" />
 <span id="uploaderid1" style="font-family:verdana;font-size:10;">
 Upload File: <input name="id1" type="file" value="id1" onchange="return uploadFile(this,'')" /></span>
 <span id="loadingid1"></span>
 <iframe name="iframeid1" src="imageupload.php" width="400" height="100" style="display:none"> </iframe>
 </form>
 </body>
</html>

Beri nama index.html

dan selanjutnya buat file imageupload.php Continue reading »

Dec 192009
 

Yang paling menonjol dari ExtJs 3.1 adalah pada tambahan pada properties gridnya yang membuat semakinkeren, masih ingat dengan kemampuan excel yang bisa membuat split pada colom tertentu sehingga kolom tersebut tidak ikut scroll horrisontal.

Pada ExtJs 3.1 ini telah di tambah dengan kemampuan yang salah satunya bisa mengunci kolom tertentu sehingga kolom tersebut tidak terpengaruh saat scrol horisontal bergeser.

-

-

Untuk mengaktifkan Mode Lock anda dapat menambahkan source di bawah ini :

Script tambahan : Continue reading »

Oct 202009
 

Combo Grid

Combo Grid

Ini adalah pengembangan dari source yang kemaren saya post. yaitu ComboBox TwinTrigger dengan combo kita akan membuat saat tombol combo di clik akan memunculkan grid di bawah combo tersebut.

Ide ini terpikirkan oleh saya setelah saya beberapa saat lalu pernah membuat combo multi colom dengan java swing, nah ternyata teorinya sama juga di sini, yaitu menggunakan PopUpMenu.

Ok langsung saja langkah – langkahnya seperti berikut :

  1. Buat grid dari ExtJs
  2. Buat menu juga
  3. isi menu dengan panel yang di dalam panel kita addkan komponen grid yang telah kita buat.

ok mudahkan lihat source di bawah ini :

var helpGrid = new Ext.menu.Menu();
helpGrid.add(
  new Ext.Panel({
    title:'CARI DATA',
    layout:'fit',
    buttonAlign:'left',
    modal:true,
    width:600,
    height:400,
    closeAction:'hide',
    plain: true,
    //items: [gridNPWPD1],
    buttons: [{
      text: 'BATAL',
      handler: function(){
        helpGrid.hide();
      }
    }]
  })
);

kita tinggal membuat combo yang akan memanggil popup menu tersebut berikut source code nya :

Ext.ux.TwinCombo = Ext.extend(Ext.form.ComboBox,{
  initComponent: Ext.form.TwinTriggerField.prototype.initComponent,
  getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
  initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
  onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
  trigger1Class: Ext.form.ComboBox.prototype.triggerClass,
  onTrigger2Click : function(){
      helpGrid.showAt([this.getPosition()[0],this.getPosition()[1]+this.getHeight()]);
  },
  validationEvent:false,
  validateOnBlur:false,
  trigger1Class:'x-form-clear-trigger',
  trigger2Class:'x-form-search-trigger',
  hideTrigger1:true
});

Ok jadi deh combo kita silakan kembangkan , semoga membantu ….

Oct 182009
 
Combo Modif

Combo Modif

Bagaimana tertarik dengan tampilan combo di atas anda bisa menggunakan source di bawah ini

 Ext.ux.TwinCombo = Ext.extend(Ext.form.ComboBox,{
	initComponent: Ext.form.TwinTriggerField.prototype.initComponent,
	getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
	initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
	onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
	trigger1Class: Ext.form.ComboBox.prototype.triggerClass,
	onTrigger2Click : function(){
		var v = this.getRawValue();
		alert (v);
	},
	validationEvent:false,
	validateOnBlur:false,
	trigger1Class:'x-form-clear-trigger',
	trigger2Class:'x-form-search-trigger'
	//hideTrigger1:true
});

Cara penggunaan :

new Ext.ux.TwinCombo({
	width: 130,
	fieldLabel:"NPWPD",
	tooltip: 'Advanced Search',
	emptyText:'NPWPD...',
	allowBlank:false,
	name:'NPWPD',
	id:'NPWPD'
})

Silakan di kembangkan

Sumber http://extjs.com/forum

Oct 012009
 

Mbahsomo Chat

Mbahsomo Chat

bersamaan dengan di akuinya batik oleh dunia, mbahsomo juga telah menyelesaikan bagian kecil dari Project M Forum yaotu chat online dengan browser.

Untuk dapat mengakses anda harus register dulu. untuk demo silakan masuk ke http://forum.do-event.com/?/chat/

Terimakasih kepada :

ExtJS, CodeIgniter, dan semua teman – teman yang telah membantu semoga ini dapat bermanfaat.

Sep 292009
 

Setelah beberapa hari saya bertapa dan bersemedi akhirnya bisa louncing versi beta untuk M Forum, dalam M Forum ini akan ada modul untuk chat yang akan bisa di load melalui 2 metode yaitu dengan melalui browser dan yang satu dengan mendownload program chat yang bisa di install ke kompi masing – masing tanpa perlu buka browser.

untuk sementara yang modul chat belum saya louncing karena masih dalam proses develop.

untuk demo forum anda bisa masuk ke sini : http://forum.do-event.com

M Forum

M Forum

Untuk dapat mendownload sourcenya anda bisa masuk kesini

Sep 262009
 

Assalamu’ alaikum wr wb

Pada akhir – akhir ini kita sering mendengar tentang kata – kata JSON atau JavaScript Object Notation biasanya sering digunakan pada pemrograman web, menurut kabarnya JSON inilah yang akan nantinya menggantikan format XML yang sering digunakan. kenapa harus menggunakan JSON, ada beberapa kemudahan pada JSON di banding dengan XML, kalau XML tagnya mirip dengan tag HTML sedangkan JSON dia lebih mengarah kepada Array yang ter setruktur.

contoh format XML :

<induk>
  <anak1>Satu</anak1>
  <anak2>Dua</anak2>
</induk>

Continue reading »

Sep 172009
 

PopUp Menu

PopUp Menu

Pada tutorial kali ini saya akan menunjukkan bagaimana membuat popup menu pada halaman html yang kita buat, dengan adanya popup menu ini kita akan dapat membuat menu klik kana sesuai dengan keinginan kita, ada beberapa hal yang kita butuhkan dalam pembuatan popup menu ini.

  1. Library ExtJs.
  2. yang jelas ya sebuah halaman html

Untuk mematikan event clik kanan pada halaman html anda dapat menambahkan scrip pada body html kamu

<body oncontextmenu="return false;">

ok diatas telah kita buat sebuah source untuk mematikan event klik kana pada halaman html kita. selanjutnya kita akan membuat popup menunya dengan memanfaatkan library dari ExtJs. ok silakan tulis coding di bawah ini

Ext.onReady(function(){
  Ext.QuickTips.init();
  Ext.getBody().on('contextmenu', function(e){
    taskContextMenu.showAt(e.getXY());
  });
  var taskContextMenu = new Ext.menu.Menu();
  taskContextMenu.add(
    new Ext.menu.Item({text: 'HOME', id:'1',handler:  loadNewPages}),
    new Ext.menu.Separator(),
    new Ext.menu.Item({text: 'ABOUT', id:'2',handler:  loadNewPages})
  );

  function loadNewPages(node){
    if(node.id=='1'){
      window.location="#";
    }else if(node.id=='2'){
      Ext.Msg.alert('ABOUT', '<b>WELCOME<b><br>ANDA BERADA PADA EVENT ABOUT');
    }
  }

});

ok mudah kan sekarang coba klik kanan pada halaman html kamu pasti bisa deh 😀