Getting started with ExtJS


Get the latest release
Download latest version of ExtJS from http://www.extjs.com/products/extjs/download.php.

Setting up development tools
Before you start any serious development, it is useful to identify the tools to be used. For example – for common web application development using ExtJS and PHP, following development tools will be very handy:

  1. XAMPP, which includes
  2. Apache Server
  3. MySQL
  4. ZendEclipse
  5. Firefox
  6. Firebug

I personally recommend firefox and firebug combination, because of strong debugging capability provided by Firebug

Some ground work

  1. Create a PHP project
  2. Create a lib directory within that project
  3. Copy the downloaded extjs files into lib folder
  4. Rename ExtJS folder (e.g. ext-3.0.0) to ext
  5. Create an index.php file in project’s home
  6. Create additional directories like css, images, src, etc. as per your process and standard

index.php code

<html>

<head>

<META http-equiv="Content-Type"
content="text/html; charset=utf-8">

<META HTTP-EQUIV="Pragma"
CONTENT="no-cache">

<META HTTP-EQUIV="Expires"
CONTENT="-1">

<title>ExtJS
Labs</title>

<link rel="stylesheet" type="text/css"
href="lib/ext/resources/css/ext-all.css"
/>

<link rel="stylesheet" type="text/css"
href="lib/ext/resources/css/xtheme-gray.css"
/>

<script type="text/javascript"
src="lib/ext/adapter/ext/ext-base.js">
</script>

<script type="text/javascript"
src="lib/ext/ext-all-debug.js">
</script>

<script type="text/javascript"
src="src/scripts/PageLayout.js">
</script>

</head>

<body>

<div id="header">

               
<img src="images/healthytree.PNG"
height="343" width="1200" />

</div>

</body>

</html>

Notice the tags and script tags inside the html’s head tag. Basically, you are including ext-all.css, xtheme-gray.css, ext-base.js and ext-all-debug.js.That is all you need to include to get started with ExtJS and it will be usually enough for the simple web applications.

——————————————————————————–
Create your first ExtJS file (PageLayout.js)
Ext.BLANK_IMAGE_URL = ‘lib/ext/resources/images/default/s.gif’;
Ext.onReady(function(){

var viewport = new Ext.Viewport({
id: ‘viewport’,
layout: ‘border’,
autoWidth : true,
height : ‘100%’,
items: [{
xtype:’panel’,
region: ‘north’,
contentEl: ‘header’,
margins: ‘0 0 0 0′,
height: 345,
border: false
},
{
xtype:’panel’,
region: ‘west’,
margins: ‘0 0 0 0’,
width: 45,
border: false
},
{
xtype: ‘panel’,
region : ‘center’,
border: false,
html: ‘

Have you registered yourself at http://www.swasthjeevan.com? ‘ +

This website promotes preventive care and it helps you live a healthy life.


},
{
xtype: ‘panel’,
region : ‘south’,
border: false,
html: ‘

Alternately, you can also avail same services at http://www.swasthjeevan.in


}
]
});
viewport.render(Ext.getBody());
});

You are ready to launch your first application in ExtJS. Put your whole project inside the htdocs directory of the installed xampp root folder. Launch application as http://localhost/ExtJSLab/. It will show following screen:
SampleScreen

Please note that Ext.onReady(function(){—} contains the complete code being executed through the ExtJS library.

Tagged with:
Posted in Sencha ExtJS

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

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: