Sencha Inc. | HTML5 Apps

Blog

The New Sencha Eclipse Plugin

September 25, 2012 | Aditya Bansod

We've been working on various tools that make a Sencha developer's life easier, and we started with Sencha Architect. Our new plugin makes it even easier to use Architect by providing a full set of code completion and code assistance features for Eclipse.

To start, we included the eBay Open Source project VJET, which provides a set of base functionality for giving Eclipse a much richer understanding of JavaScript, so you get stronger typing and a better IDE experience when using JavaScript in Eclipse. But in order to make it even more useful for Sencha developers, we extended VJET in various ways to better understand Ext JS specific constructs, like our class system, extends and more. You get support for the Ext JS builtin classes (like Ext.panel.Panel) and also your custom types, and any subclasses you make of the Ext JS types. It puts an incredible amount of power into your hands and makes developing Ext JS applications faster and easier.

To get started, you'll need to have the new version of Sencha Complete or Sencha Complete: Team, which include the plugin. Once you follow the install instructions, you'll need to install the type library that corresponds to the version of Ext JS that you're using. The type library contains metadata about the framework that describes build-ins methods, classes, mixins, etc and ensures the plugin provides the correct code assistance.

The Sencha Eclipse Plugin currently supports Ext JS 4.0.7 and Ext JS 4.1. Load the type library, and once you've switched your Eclipse perspective to the VJET perspective, you'll get code assistance and syntax help as you type. Since the plugin is built directly into the Eclipse code intelligence model, you'll be able to use many familiar Eclipse features such as proposals, outlining, object hierarchy, call hierarchy, and more.

I'll run through a few of the major features that the Sencha Eclipse Plugin provides for Ext JS developers.

Ext JS Method Proposals

Built-in Ext JS types and classes are well known to the Sencha Eclipse Plugin. For example, Ext.define has two signatures, and when you type "Ext.", you get the full list of items contained in the Ext namespace, and for "define", you get proposals for both signatures. The plugin also supports Mixed input types, so if you have a method that can accept (for example) a string or an object or an array, the plugin suppresses errors and allows those mixed types to be passed in.

Support for Ext.application

You set configs like the appFolder, defaultUrl, viewport configuration options and more in Ext.application. When you start writing your application entry point with the Sencha Eclipse Plugin, all the configuration options for Ext.application are proposed to you as you type.

Full Class System Support, including Ext.define and Mixins

Not only does the Sencha Eclipse Plugin support built-in Ext JS types, it also supports your custom classes and your subclasses for built-in types. If you were to Ext.define("myclass", { extend: "Ext.Panel"}) as you were creating your subclassed class, you would get access and code completion to all the supertype's methods.

In addition to subclassing, mixins are fully supported. When you mixin a class, all the methods for that mixin get proposed to you as you type, so you can get full access to the many powerful mixins that are used throughout Ext JS.

Automatic Support for Getters and Setters

Imagine your application has a config called "enabled". Ext JS automatically generates getEnabled and setEnabled for you as a part of the class system. The Sencha Eclipse Plugin understands that framework behavior, and as you type this., you'll see proposed completion options for getEnabled and setEnabled, even though those are generated at runtime. It makes it easier to use proper accessor patterns when writing to your application configs.

These are just a few of the many code complete and Ext JS specific patterns that the Sencha Eclipse Plugin supports. Since the plugin is based on VJET, you get many more features in addition to all the advanced Ext JS specific code completion, including common mistakes like mismatched curly braces, mismatched quotes, and the like. It makes coding in JavaScript so much easier -- we hope you enjoy using it as much as we have building it.

You can get the Sencha Eclipse Plugin through Sencha Complete.

There are 36 responses. Add yours.

Rafael Carvalho

2 years ago

The good thing is that i bought the complete pack a month ago smile I would have waited if I knew it was coming…

Jim

2 years ago

Just to be clear—this article lists Sencha Complete: Team edition, as the minimum requirement, right?  And the Team edition is ~$2.2k/seat with a minimum of 10-seats, is that correct?

Erick The Red

2 years ago

Is this also going to be available for the Aptana Studio 3 IDE?

John Doe

2 years ago

How does this compare to the Intellij IDEA development experience?
Is it worth creating a plugin for IDEA as well?

Ian Skerrett

2 years ago

Great to see this Eclipse plugin.  I know VJet is very cool so it is great to see you are using it.  Sencha is incredibly popular, so this will be a great offering for the Eclipse community.

Please feel free to list the plugin on our Eclipse Marketplace.  http://marketplace.eclipse.org/

Ryan

2 years ago

Any plans to add support for Sencha Touch?

Michael Mullany

2 years ago

@ JIm - that was an incomplete sentence which I’ve just fixed - the plugin is part of both Sencha Complete & Sencha Complete: Team.

Marc Fearby

2 years ago

I use Visual Studio 2010 so I’m not expecting any of this kind of love for a long time, if ever. I feel a bit like a lepper using Microsoft technologies around here grin

Akeem Oriola

2 years ago

I use Visual Studio 2010 too and its so great with JQuery editing, I can only wish Sencha take queue and do a plugin for this IDE and save us some trouble.

venkatesh.R

2 years ago

Do you have any plan to support for Sencha touch 2 ? Because we are looking for Sench touch 2 with eclipse Plugin.

Thanks

Kazuhiro Kotsutsumi

2 years ago

I translated it into Japanese.

http://www.xenophy.com/javascript/3283

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

Sergio Samayoa

2 years ago

Sencha should crafted Architect as eclipse plugin since the beginning so all this goodies were part of it. Now all this goodies are solely for those who craft ExtJS by hand.

Regards.

Paul

2 years ago

I’ve bought sencha complete july the 31-st, is this eclipse plugin freely available for me or should I renew?

Paul Jones

2 years ago

Are there any plans to license this tool on its own? I would really like to license the eclipse plugin for my entire development team, but don’t have the need or the budget to license Sencha Complete for everyone.

Alok Ranjan

2 years ago

Hello Aditya
Thanks for the quick overview. As usual Sencha Rocks!

If I buy Sencha Complete, is it possible that I can use Sencha Architect while other components are being used by my developer? I don’t often code and it will not look logical to me to buy two copies.

Aditya Bansod

2 years ago

@Paul—you’ll need to renew your support for access.

@Paul Jones—right now there are no plans to license this separately from Sencha Complete and Sencha Complete: Team.

@Alok—you’ll need to buy two licenses of Sencha Complete in your case. You can contact our sales team via the Contact Us form on the website for additional details.

Michael

2 years ago

Netbeans support would be most welcome!

santhosh kumar

2 years ago

Better if we include ext-gwt (aka gxt) in the eclipse plugin and also as part of the sencha complete (team)

Phil Smit

2 years ago

You mention at the beginning of this article:

“Our new plugin makes it even easier to use Architect by providing a full set of code completion and code assistance features for Eclipse.”

I use Sencha Architect, but reading through the article it seems this plugin is only intended for Eclipse or does this also enable code completion in Sencha Architect?

In my view, Sencha Architect *should* also have code completion when using the built in code editor.

Can you clarify whether there is code completion for Sencha Architect?

Thanks

Atila Hajnal

2 years ago

Are You planning to sell separate plugin not included in Complete or Complete:Team product? It would bi nice to have this plugin.

Doug Bieber

2 years ago

Too bad it currently supports 4.1.0, two releases and 6 months behind the current release curve. Plus, we’re not paying $900 per developer head. You should unbundle this.

Ben

2 years ago

@Doug: Neither will we.  I don’t know the numbers, but it seems like a poor sales decision on their end.  At least it isn’t as insulting as the ones only available in Team. The way I view bundles is a benefit to the consumer in reduced prices for purchasing multiple products.  Sencha treats bundles as a way to try to force users to pay for things they don’t want.

Aditya Bansod

2 years ago

@Phil—Sencha Architect does not have code completion. If you want code completion, you’ll need to use the Eclipse Plugin along side Architect.

Aditya Bansod

2 years ago

@Phil—Architect does not support code completion. If you want code completion, you will need to use the plugin with Architect side by side.

camelcase

2 years ago

I found references to an opensource VJET extension for ExtJS that seems to do everything mentioned above. Did Sencha acquire that project or are the code bases separate?

If I did buy Sencha Complete but was not interested in Architect would the Sencha VJET extension offer benefits for regular JavaScript development in Eclipse targeting ExtJs?

Aditya Bansod

2 years ago

@camelcase—The plugin is built on top of VJET but adds in a ton of Ext JS / Sencha specific features, such as understanding our class system and more.

Westy

2 years ago

Sounds good, but you’ll have to prise Sublime Text 2 from my cold dead hands! :D

Travis Phillips

2 years ago

Is there documentation on this plugin? Just to get a basic understanding how to use it? doesnt it install templates, so I can click “new”, “create project” and sencha is there to build out a basic layout for touch?

Aditya Bansod

2 years ago

@Travis—you can get the trial here: http://www.sencha.com/products/complete/evaluate/

Yevgen

2 years ago

Bad that this plugin available only under Complete and Team.
What a problem to sell it separate, or include to ExtJs Package for additional price?
For example i have Architect, and planing get EXtJs (i mean core lib license), and i no need most of what Complete is offering, but im really interesting in Eclipse plugin, cz just it can speedup my dev.

Chris

2 years ago

I agree with Doug and Ben.  I was so excited reading about the Eclipse plugin I was mentally preparing myself to switch IDEs!  Disappointed to find out that won’t be happening because of the ridiculous bundling.  Not worth the price tag if you don’t need all of the other stuff in the Sencha Complete bundle.

If you had confidence in your products to sell themselves and truly cared about your customer base, you would offer it separately.  I hope you’ll at least consider it.

Bruce

2 years ago

When will a Jetbrain IDEA plugin be made available?

chazmanian

1 year ago

Those of us who want Sencha to unbundle the Eclipse plugin should start an online petition…

Owen

1 year ago

I believe releasing this plugin in a free mode would help increase the uptake of Sencha products by giving people a better sense of how easy it is to use.  It can be a bit bewildering at first, or if you are coming from some of the older ExtJS versions to the newer ones where there have been many changes made.

gaoxiongxue

1 year ago

i would like to see the extjs operating principle .

Chris

1 year ago

@Owen - I agree.  I’ve had a hard time convincing colleagues to make the jump to ExtJS at work because of the learning curve so I’m the only one trying to use it.  The plugin would certainly help increase the chance of adoption here.  Too bad the Sencha folks are too short-sighted to see that.

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

Commenting is not available in this channel entry.