Sencha Inc. | HTML5 Apps

Blog

Sencha Eclipse Plugin 2.0 New and Noteworthy

February 25, 2013 | Justin Early

Guest Blog Post

Intro

Sencha Eclipse Plugin 2.0Sencha Eclipse Plugin is a full code assist, searching and validation plugin for the popular Eclipse IDE. With the plugin, you’re able to get code assist for standard Sencha Touch 2.1 and Ext JS 4.0.7, 4.1.x types, as well as general support fo the Ext JS and Sencha Touch classes that you define as a part of your project.

With Sencha Eclipse Plugin 2.0, we worked on the following features:

  • VJET move to the Eclipse Foundation.
  • Enhance Sencha Eclipse Plugin understanding of the Ext JS class system by supporting overrides.
  • Improve type validation.
  • Addition of a JavaScript formatter.
  • Improve searching and discoverability.
  • Various bug fixes and improvements from the underlying VJET OSS.

Learn the latest tips and tricks for Mobile and Web Development with Sencha Eclipse Plugin at SenchaCon 2013. Register today!

VJET move to the Eclipse Foundation

Sencha Eclipse Plugin 2.0 is built on top of the Eclipse VJET project. Version 1.x was based VJET that was hosted with ebayopensource.org. VJET has moved to eclipse.org, and as such the packages had to change from org.ebayopensource to org.eclipse, so for developers migrating to version 2 of the Plugin, there is a little bit of work you have to do for the upgrade. When upgrading from Sencha Eclipse Plugin 1.x, you must migrate your projects. See this wiki for more information.

Ext JS and Sencha Touch Class System Improvements

In the Sencha Eclipse Plugin 1.x, the Plugin had knowledge of many of the core constructs ini the Ext JS and Sencha Touch class system. Now, in version 2, we’ve added support for override and improved the way the plugin reads comments and metadata from JSDuck.

In this release, Ext.override and Ext.define with an override preprocessor are now supported. Below is a demo:

  • Override existing types using Ext.override or Ext.define with override preprocessor.

Demo of Using Override with Sencha Eclipse Plugin

All the code for this demo is located on github.

There have also been improvements in the Plugin’s understanding of JSDuck comments.

All the code for this demo is located on github.

  • Updates to all type libraries to support config properties as members of class. Multiple documentation issues fixed.

Validation Improvements

Since the Sencha Eclipse Plugin is based on the open source VJET, we’re able to get the benefit of all the work happening in the open source universe. VJET has approximately 105 type checking validation rules in addition to JavaScript syntax error checking which can be found while typing or during incremental building. This can be leveraged for type checking of properties, config properties, arguments to a method callback, arguments with different type definitions, just to name a few.

With the type checking in Sencha Eclipse Plugin, you can find issues with applications quickly as well as find issues with JSDuck type comments when they don’t match usage. While developing Sencha Eclipse Plugin, we used this capability ourselves, and as we found issues with JSDuck type comments, we fixed those in Ext JS and Sencha Touch which helped improve documentation on docs.sencha.com.

Here are some of the type validation improvements in 2.0:

  1. Automatic Validation of dependencies — if you change one JavaScript file and this file has dependencies on save, the dependant files are validated. For example, if you change A, and B depends on A, B will be automatically revalidated without any user action.
  2. Disabled validation warnings about property hiding —
     
    Ext.define("MyApp.design.MyStore", {
        extend: 'Ext.data.TreeStore',
        fields: ['bla', 'text', 'id', 'leaf'] //Warning: "Property fields hides property of its parent type Ext.data.TreeStore"
    });
     
  3. Disabled Validation warning about overriding method mismatch when you don’t have a JSDuck comment.
  4. Validation errors will show for unknown types for extend, requires, mixins, uses. If you enter a type which is not defined:
     
    Ext.define('MyClass', {
        extend: 'FooBar'  /// you will get error here : "FooBar cannot be resolved"
    })
     
  5. Improvements to headless validation tool to support validation of Ext JS applications using VJETV.

New JavaScript formatter

Sencha Eclipse Plugin 2.0 adds support for a new JavaScript formatter and a variety of different formatting styles. Use Control + Shift + F to format your JavaScript code. There are multiple profiles available to match the code style your team uses for authoring JavaScript code. This feature was adapted from the Eclipse project JSDT’s formatter.

Searching and discoverability improvements

Searching for type names used in uses, requires, extends, mixins, override to support hover documentation and support for F3/Go to declaration.

Additional Fixes

Lastly, we made a various set of fixes to the Sencha Eclipse Plugin to address “gotchas” people were running in to in the field. If these bit you while using the Plugin, version 2 should make your life a little easier:

  1. Fixed space in path issues where no code assist/validation/searching/runtime would work.
  2. Fixed issue where developers were using Eclipse Helios without service pack.
  3. Performance enhancements to reduce memory consumption.

There are 8 responses. Add yours.

Manuel

2 years ago

Hi,
we’re developing with ExtJS and Senach Touch and are highly interested in using the Eclipse Plugin, but buying the whole Sencha Complete product is not an option for us. Is there a way to get it without Sencha Complete or are there any plans for the future to get it as stand-alone product?

Best regards!
Manuel

jordandev

2 years ago

Yeah, you should sell it stand alone? Would get a lot more people buying and using it.

Kazuhiro Kotsutsumi

2 years ago

I translated it into Japanese.

http://www.xenophy.com/extjsblog/6087

Provision: Japan Sencha User Group
http://www.meetup.com/Japan-Sencha-User-Group/about/

Kirby

2 years ago

This guyz seem to have a better solution

http://www.sencha.com/forum/showthread.php?256974-Ext4j-Another-approach-on-Ext-JS-development

And if it will be free as they are saying you might have to reconsider this pricing.

Aditya Bansod

2 years ago

Hi folks—This is only available as a part of Sencha Complete and we don’t have plans to make it available by itself.

Imran Suhail

2 years ago

If this is only available with Sencha complete then isnt this bad because with Sencha Complete you have Sencha Architect which is better for building Sencha apps?

Patricia Wang

2 years ago

When can we have the debugging capability in the plugin?

pelee

2 years ago

It would be nice if the Architect IDE could provide the capability.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.