Recently i came across a very nice javascript gui library called extjs It offers many nice advanced gui function such as grids, combo boxes, modal dialogs and so on. Right now i’m trying to create some basic bindings between RoR and extjs and will continue to write about my progress here.
First we need to copy some files from the current extjs 2.0 Distribution into our new rails project, namely ext-all.css into stylesheets, ext-base.js (found in adapter/ext/ext-base, could be replaced with the prototype adapter if you still want to use prototype) and ext-all.js into the javascripts directory.
Now i created a basic layout file called ext.rhtml which acts as a basic skeleton for our apps:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><%= @title.to_s %></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/stylesheets/ext-all.css" />
<script type="text/javascript" src="/javascripts/ext-base.js"></script>
<script type="text/javascript" src="/javascripts/ext-all.js"></script>
</head>
<body>
<%= @content_for_layout %>
</body>
</html>
Now we can create an controller and put some basic methods in it:
def index
render :layout => "ext"
end
This will render the index of the controller with the newly created ext layout. In Part 2 we will look into creating some basic hello world application with it