Sencha Eclipse Plugin for ExtJS


Image

In this article we will walk through the steps to setup Sencha’s newly released Eclipse plug-in and how do we configure it to get the auto-completion, docs, object hierarchy, call hierarchy, etc. while we write Sencha ExtJS code.

Scope of this article :

  • Installation of Sencha Eclipse plugin in to Eclipse ( Eclipse Indigo) .
  • Install the Type Library that corresponds to the version of ExtJS we are using.
  • Creating a sample code by using the code assistance.

Pre-requisites:

        Eclipse (Indigo) , VJET

How to do it:

Let us fallow the step-by-step process which lead us to achieving the requirement.

STEP 1 : Installation of Sencha Eclipse plugin in to eclipse.

Download the plugin from http://www.sencha.com/products/complete/evaluate

Fill the details and download the Sencha Eclipse plugin.

  After the download we shall get fallowing files:

Image

Extract SenchaEclipsePlugin-2.0.0.zip. It contains the following files:

Image

Extract the following files:

 Sencha_Eclipse_Plugin-trial-2.0.0.50.zip

 SenchaTouchTL-2.1.zip

 ExtJSTL-4.1.zip

 These TL files are useful projects for the possible suggestions.

 Sencha_Eclipse_Plugin Installation:

Run your Indigo Eclipse, go to help menu and select “Install New Software” option. 

Image

A pop-up window appears , as shown below. Click on the Add button.

Image

Image

Click on Local… as the plug-in files are located on our file system.

Here we can give location of the extracted plugin zip file or the archive it self by giving the location.

Go the location where we have extracted the plugin zip file , and open it.

Image

Click on OK button

Image

Click on OK button

Image

Continue the steps to complete the plug-in installation.

STEP 2 : Install the type library (TL) related to the version of ExtJS framework you’re using.

We need to install the type library which are related to the version of ExtJS you’re using. The type library contains meta data about the framework that describes build-ins methods, classes, mixins, etc and ensures the plugin provides the correct code assistance.

First we need to import TL Projects Sencha has provides to us.

Right-click in the Project Explorer area of Eclipse and click on Import->Import..

Image

In the import pop-up we need to select the “Existing Project into Workspace” in the General Section.

Image

Click on Next> button.

Click on the Browse button, and Go to the location where we have extracted the ExtJSTL-4.1 ,because this is the project which will be used to give suggestions.

Image

In the Sencha Complete they have given two options for the Extjs TL projects ExtJSTL-4.0.7 , ExtJSTL-4.1 in my example i am taking ExtJSTL-4.1.

Now Select the “ExtJSTL-4.1” and click on OK.

Image

Image

And click on “Finish”

Image

With this importing the Type Library Project is completed.

STEP 3 : Creating a sample code by using the code assistance.

Image

Image

Click on the next then it will give a pop-up window. Enter the Project Name and click on the Next. 

Image

Image

Go to “Projects” tab in the window. In the Project tab we have to give the TL Project as the Build path project. For this click on the “Add” button in this window then a pop-up with existing projects will come.

Image

Another window appears with all the projects in the present workspace. Select the TL project and click on OK button.

Image

Image

Click on Finish Button

Now let us see how we can create a JS file for our sample project using the plugin

Firswe will see how to create model view controllers. There is no explicit mechanism here to create model/view/controllers here in this Sencha Eclipse plugin.

But we can achieve the same with proper packages , Now we will see how to create VJET packages.

Image

Give the package name and click on finish

Image

Like wise create a package for the controller and view.

Image

Now create a java script file in the view part.

Image

Image

Give file name for the js file.

Image

Click on Finish.

Image

Now we will see how Sencha Eclipse plugin is giving suggestions while writing code , Just type Ext ( ExtJS library class) and a dot (.) and Ctrl+space will give you suggestions related to Ext class.

Image

Image

Image

Like this plug-in will help your development by giving proper suggestions.

Summary :

With the help of this plugin a developer can write a fault free code from the options provided by a ExtJS class , developer can get code assistance and syntax help as he type the code.

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: