Using VJET Plugin For JavaScript development

Problem Statement :

Writing JavaScript code in a normal text editor is very difficulty and it a developer may not be able to find out the mistake in his code while writing the code itself .  VJET JavaScript IDE  will help developer from unwanted mistakes like the above , we can use VJET javascipt IDE in place of standard text editors or simple JavaScript editors ,  to brings common IDE features to JavaScript. VJET JavaScript provide coding assistance and support to a developer while developing Sencha applications.

VJET Javascript plug-in advantages over normal text editor or simple javascript editors :

1. This plugin can be used as a Eclipse plugin , so the development in the IDE like eclipse will become easy for a java script developer.

2. We can get quality code  and  faster development.

Scope of this article:

  • Installation of VJET in Eclipse like a plugin.
  • How to set up our project to use this plugin to develop our own applications.
  • A real-time example by explaining real-time scenarios.
  • Creating our own Type Library.


Eclipse and VJET plugin

How to do it:

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

STEP 1 : Installation of VJET in eclipse like a plugin.

Install VJET as an Eclipse Plugin :

  • In your eclipse go to Help menu => Install New Software


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


Another pop-up that will help to give the location of our plugin. In this pop-up we have to give the url which will download VJET plug-in in to eclipse.


Continue the steps to complete the plug-in installation.


STEP 2 : How to setup our project to use this plugin to develop our own applications.

For Using this plugin in the ExtJS or Sencha Touch application we need to have TL (Type libraries) of the ExtJS or Sencha Touch versions.

In this step we are going to see , how we can import and configure the projects to support ExtJS or Sencha Touch application development..

Import the TL project in to Eclipse :

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


A pop-up window appears , as shown below. we need to select the “Existing Project into Workspace” in the General Section, and Click on the next.


Click on the Browse button, and Go to the location where we have extracted the ExtJSTL-4.1 ,because this is the project which is helpful to give suggestions. Now Browse and select the TL project.



Click on Finish button.



Importing the TL Project is Completed.

For using this TL Project imported in to out development.

Right Click and select New => Other..


Select VJET project and click on the NEXT >


Enter the project name , and click on the “Next” button.


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.


Select the TL Project we have added earlier in the below pop-up , and click on OK.


click on the Finish button.


STEP 3 : A real-time example by explaining real-time scenarios. 

Now create a package which will be useful to separate the model,view,controller code. As this is View Related Code I am preparing the view.


Enter package name and click on Finish button.



Now create a JavaScript file for writing our code.





Now we will see how VJET project 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.



STEP 4 : Creating our own Type Library.

What is Type Lib ?

A VJET type library is a type library which can be created by using the javascript core library code and VJET VJO type construction kit and VJET documentation for type declarations. By including this type libraries project in to your project path we can use these type libraries.

So Start Your Eclipse and Create a new VJET Project.


Now we will create a package which will helpful to separate the functional areas.



Create a Otype which will be useful to get suggestions.


Enter name of the Otype file and package details.



It is give you a js class with normal prototype , now we have to write our code here.



Lets see how to use our Otype Class in our own projects . 

First Create new project to test it.



Add Our custom library to the project so we can get suggestions related to that library files



Select the Custom Library from the Options and click on OK button.


Custom Library is Added to our project.


Create a package to write our functional class.




Create a JS class for writing our functionality.


Enter class name and click on finish


Now try to use our custom library class.


Summary :

We are able to create our Custom libraries with this plugin and how to use those custom library projects .

Tagged with: , ,
Posted in General, Sencha ExtJS, Sencha Touch

Leave a Reply

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

You are commenting using your 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 for all latest blogs.

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

Recent Publication
%d bloggers like this: