AJAX – Getting Started ExtJs with Perl CGI

I usually use ExtJs with Struts, PHP, or Google Web Toolkit (GWT). Here i will create a simple tree panel sample using ExtJS and Perl CGI.

Here is our directory structure:
extjstest
-extjs (directory)
-JSON (directory)
-data.cgi (file)
-index.html (file)
-JSON.pm (file)

requirements:
1. Download the latest Ext Js from here and extract the archive files to extjs folder
2. You have mod Perl cgi enabled with your apache server, you can see my post at Perl for how to set up mod mod Perl CGI in apache
3. JSON module for Perl, you can download it from here

Enough talk, let’s start coding!

Filename: index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {
		var Tree = Ext.tree;
		var tree = new Tree.TreePanel( {
			el : 'tree-div',
			autoScroll : true,
			border: false,
			title: 'My First Panel',
			animate : true,
			enableDD : true,
			containerScroll : true,
			loader : new Tree.TreeLoader( {
				<strong>dataUrl : 'data.cgi'</strong>
			})
		});
		// set the root node
			var root = new Tree.AsyncTreeNode( {
				text : 'Ext JS',
				draggable : false,
				id : 'source'
			});
			tree.setRootNode(root);

			 // render the tree
		    tree.render();
		    root.expand();
		});
</script>

</head>
<body>
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
</body>
</html></a>

As you see above code, the treepanel gets the data url from data.cgi. What is this data.cgi produce? the data.cgi will response JSON type to the html, JSON is optimized version of XML.

2. data.cgi

#!/usr/bin/perl -w
use CGI;
use CGI::Carp qw(fatalsToBrowser);
use Storable;
use JSON;
$page = new CGI;


print "Content-type: application/json\n\n";
@mydata0={'text'=>'merci','id'=>'3','leaf'=>true,'cls'=>'file'};
@mydata1={'text'=>'audi','id'=>'2','children'=>\@mydata0};
@mydata2={'text'=>'benz','id'=>'1','children'=>\@mydata1};

@mydata=(@mydata2,@mydata3);

$text = objToJson(\@mydata);

print $text;
exit (0);

Open your browser and point to http://localhost/extjstest/index.html. If everything fine, you should see a treepanel displayed.

Advertisements

7 thoughts on “AJAX – Getting Started ExtJs with Perl CGI

  1. Hi Ronald,
    good work! I was about to spend some hours to change samplecode from php to good old perl – you helped me a lot. Thank you!
    Rudolf

  2. I do not know if it’s just me or if everybody else encountering issues with your blog. It appears as though some of the text on your content are running off the screen. Can someone else please comment and let me know if this is happening to them as well? This could be a problem with my browser because I’ve had this happen previously.

    Thanks

  3. Hi, i read your blog occasionally and i own a similar one and i was just wondering if you
    get a lot of spam remarks? If so how do you prevent it, any plugin or anything you can
    advise? I get so much lately it’s driving me insane so any help is very much appreciated.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s