ExtJS and Sencha Touch code assist in Sublime Text

Sublime Text is awesome code editor because of it’s unrivalled speed, flexibility and productivity tools. With the GearboxSencha code assist plugin it becomes even better when working with ExtJS or Sencha Touch projects. Just install it and be amazed by the productivity gains.

We hate repeating ourselves

At 2Gears we take “Don’t Repeat Yourself” to a whole new level. Every thing that is even remotely repeating we try to abstract into something reusable. From an application perspective that means that we have an enormous amount of plug-and-play components and development tools that can be easily dropped into an application and that solves a specific problem with minimal coding and high reliability.

The same amount of abstraction typically happens in our favourite code editor, Sublime Text. While we love Sublime for not thinking *for* us where we don’t want it to, a bit more support in specific repeating tasks would be nice. Because we love the productivity gains, we are now releasing some of our Sublime Voodoo to ExtJS and Sencha Touch developers around the world, for free.

Sound familiar?

Did you ever calculate the amount of time spent on non-coding tasks, just navigating files, looking of variables, functions and more? How much more productive would you be if Sublime Text would help you do that a lot faster?

Navigating ExtJS dependencies

Your class probably uses a lot of other classes in ExtJS directly or indirectly. These dependencies can be direct class extensions, requires or mixins. But it gets worse, all those requires again require other classes, making navigation very hard. With GearboxSencha, just hit SUPER-ALT-P and choose the related class. The autosuggest dropdown only shows the related classes and opens the class definition when selecting it

Overriding a parent class method or property

Something every ExtJS developer spends a lot of time doing is extending certain classes, adding properties and methods of their own but also overriding or calling parent functions. To find out where a function get’s defined and add it to the current class the developer typicallly has to:

• Open the Parent class in ExtJS docs

• Navigate to the function

• Find the class that implements the overidden function using the inheritance information in the ExtJS docs

• Open the defining class

• Navigate to the method definition

• Copy the method to your file

• Start coding

How annoying and timeconsuming is it to be doing that 100 times per day? Yet we all do it. With the GearboxSencha plugin we can alleviate some of our pain. Just hit SUPER-CTRL-ALT-R, type part of the method name and select it from the list. The method is inserted into your class!

Find the definition of a class method or property

When debugging an ExtJS application you will find yourself searching through the ExtJS dependency structure a lot. How many times have you searched where a class property or method is being defined? When trying to figure out how ExtJS does it’s magic or what properties default to, it’s crucial to be able to quickly jump to the definition

With GearboxSencha installed you just hit SUPER-ALT-R and choose the function or property you are interested in. When selecting a method or property, the defining class file is opened at the line of the function definition. The plugin is able to infer all this information from the inheritance structure of the classes themselves.

Create a new ExtJS construct

Without GearboxSencha, creating a class, a method or any other ExtJS construct is a lot of repeating work, especially when you want to do it properly, including documentation. Even when you copy-paste another class or method, including JSDoc from another file, adding a new class takes too much time.

With GearboxSencha installed, just type ‘define[TAB]’ and an interactive snippet is injected. The developer just has to fill the required fields, navigating to the next one wit TAB. All required class information is also added to the JSDoc while you type, including multiple mixins and requires.

GearboxSencha includes 25+ interactive snippets for most repeating tasks like

• Class definition blocks

• Ext.applyIf blocks

• initComponent, constructor and other typical ExtJS methods. Methods are automatically accompanied with JSDoc blocks including the entered function arguments

• Siesta test blocks like startTest, it-should etc

• console.log in various variants

• this.callParent and more repeating function calls

• And more

Download it now!

Our GearboxSencha plugin is released open source. Feel free to contribute in making it even better. The easiest installation method is through Package Control in Sublime Text (GearboxSencha). Our GitHub repository contains additional the information you need to install the plugin and some dependencies.

Download the GearboxSencha Sublime Text plugin for free today and start spending your time on actual coding