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

Dec 142012
 

Assalamu’ alaikum wr wb

CSS3 Animations

Saat membuka beberapa tutorial tentang css3 di http://www.w3schools.com/ saya menemukan sebuah totorial yang menarik dan mungkin akan dapat dikembangkan, sesuai dengan imajinasi teman – teman semua, langsung saja untuk lihat script di bawah dan silakan di coba juga semoga dapat bermanfaat.

</p>
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
</body>
</html>

Sumber : http://www.w3schools.com/css3/css3_animations.asp

Wassalamu’ alaikum wr wb