In my previuos post about tutorial ExtJS, i post how to show data in our mysql database to ExtJS Grid. Now i will write how to insert data to our database using ExtJS Form. I Will make a simple one, i will use same table i use at my previous tutorial. here the screenshoot of form i made.
1. simple-form.html
<html>
<head>
<title>Extjs Form Example</title>
<!-- include ext-all.css -->
<link rel="stylesheet" href="ext-2.2/resources/css/ext-all.css" />
<!-- include ext-base.js -->
<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<!-- include ext-all.js -->
<script type="text/javascript" src="ext-2.2/ext-all.js"></script>
<!-- include simple-form.js -->
<script type="text/javascript" src="simple-form.js"></script>
</head>
<body>
<!-- form will render to this element -->
<div id="simple-form"></div>
</body>
</html>
Read the rest of this entry »
admin |
Ajax, ExtJS, Javascript, Rich Internet Application, Web Application |
I While ago i have finished my first java mobile game. I made a sokoban game with Naruto as the player character because iam one of millions of Naruto fans. I develop this game using Netbeans 5.5 IDE. here the information of the JAD file of this game:
MIDlet-1: Naruto Sokoban, /res/charset/Naruto.png, src.NarutoSokoban
MIDlet-Jar-Size: 308559
MIDlet-Jar-URL: NarutoSokoban.jar
MIDlet-Name: NarutoSokoban
MIDlet-Vendor: Vendor
MIDlet-Version: 1.0
MicroEdition-Configuration: CLDC-1.0
MicroEdition-Profile: MIDP-2.0
and here the screenshoot of the game:
You can download the jar file here, or the zip file here…
admin |
J2ME, Java |
In my previous post i wrote how to create ExtJS grid with data from mysql database using php. In that post i make an example with little data, its ok for that example. But if our data is big it sound annoying if we must show them in grid at once.
The solution is create a grid with paging. So in this post i will show haw to create a ExtJS grid with paging like this picture below.
ExtJS Paging Grid
there is no big different with my previous post, all we need just modify the js file and php file. you can download source for my previous post here
Read the rest of this entry »
admin |
Ajax, ExtJS, Javascript, Rich Internet Application, Web Application |
In my previous post i wrote a tutorial about building simple array grid using extjs. But if i have my data in a database, how i can display it on the grid? In this post i will show how to display data form the database into the extjs grid using php, mysql, and json.
1. Create the table first dan insert some sample data
CREATE TABLE IF NOT EXISTS `strawhats` (
`id` TINYINT(4) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(25) NOT NULL,
`POSITION` VARCHAR(25) NOT NULL,
`ambition` TEXT NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
INSERT INTO `strawhats` (`id`, `name`, `POSITION`, `ambition`) VALUES
(1, ‘Monkey D Luffy’, ‘Captain’, ‘I Will become the pirate king’),
(2, ‘Roronoa zoro’, ‘Swordman’, ‘Become greatet swordman’),
(3, ‘Sanji’, ‘Cook’, ‘Find all blue’),
(4, ‘Nami’, ‘Navigator’, ‘Draw map of the world’),
(5, ‘Usopp’, ‘Sniper’, ‘Become greatest warrior’);
2. db-grid.html
<html>
<head>
<title>DB GRID SAMPLE</title>
<!–- include ext-all.css -–>
<link rel="stylesheet" href="ext-2.2/resources/css/ext-all.css" />
<!–- include ext-base.js -–>
<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<!–- include ext-all.js -–>
<script type="text/javascript" src="ext-2.2/ext-all.js"></script>
<!–- include db-grid.js -–>
<script type="text/javascript" src="db-grid.js"></script>
</head>
<body>
<!–- grid will render to this element -–>
<div id="db-grid"></div>
</body>
</html>
Read the rest of this entry »
admin |
Ajax, ExtJS, Javascript, Rich Internet Application, Web Application |
First time i using Ext JS, i think how difficult to use this library. and at the first time i try to build my first grid i fail. What i see is a blank page and i dont know what the error. but i am not give up , when i am surfing on the internet i found firebug. firebug is tools that integrates with Firefox. With this tool you can debug error in your javascript code. you can download firebug here
so, before we start this tutorial make sure you already install Firefox and firebug. and you already have the Ext JS library of course. if you dont have the ExtJS library yet you can download here
lets start with the array grid (grid that the data is load from array). I use Ext-2.2 for this tutorial.
1. write the html first (array-grid.html)
<html>
<head>
<title>Array Grid Sample</title>
<!– include ext-all.css –>
<link rel=”stylesheet” type=”text/css” href=”ext-2.2/resources/css/ext-all.css” />
<!– include ext-base.js –>
<script type=”text/javascript” src=”ext-2.2/adapter/ext/ext-base.js”></script>
<!– include ext-all.js –>
<script type=”text/javascript” src=”ext-2.2/ext-all.js”></script>
<!– include your javascript code here ( see part 2 ) –>
<script type=”text/javascript” src=”array-grid.js”></script>
</head>
<body>
<!– grid will render to this element –>
<div id=”grid-example”></div>
</body>
</html>
2. write the javascript (array-grid.js)
make sure your code to build grid is inside this code:
Ext.onReady (function () {
// place your code here
});
Read the rest of this entry »
admin |
Ajax, ExtJS, Javascript, Rich Internet Application, Web Application |
Ext JS is a cross-browser JavaScript library. It includes customizable UI widgets and extensible component model so you can build richinternet application. Its also support all major web browsers like IE 6+, Firefox 1.5+, Safari 3+, and Opera 9+.
First time i use it to build web application, i am impressed. its awesome 
.. With Ext JS you can build web application like desktop application. You can check out how awesome this thing by looking the sample application here or you can download the library here (it includes full source code, build, HTML javadoc documentation and samples).
here the screenshoot of grid that build with Ext JS.
Ext JS Grid Preview
and here the screenshoot of web desktop that build with Ext JS.
Ext JS Web Desktop
admin |
Ajax, ExtJS, Javascript, Rich Internet Application, Web Application |
