THE BLOG

News, tips and tricks from 2Gears

ExtJS and Sencha Touch code assist in Sublime Text

Posted · 12 Comments
gearbox-sublime

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. 

12 Responses to "ExtJS and Sencha Touch code assist in Sublime Text"
  1. Mitesh Dave says:

    I jave JSDuck 6.0.0 exe i dint follow instruction to install jsduck via ruby.So how i can execute jsduck now and inform sublime to get code hintings

  2. Mitesh Dave says:

    Hi Rob,
    I followed instructions on GIT hub.But i am not able see code completion neither code snippet.

    Also i didt follow

    ‘The only installation steps to take after installing this sublime package are configuring the package and tell JsDuck to build the docs for the first time. Once configured, run the Rebuild jsDuck command from a file in your project and you’re all set!’

    May you please explain how to configure package and tell Jsduck.I got the point to build docs via jsduck but where to put those docs.Not clear.Please help

  3. Bill Gosse says:

    jsduck isseue:

    plugins loaded
    Package Control: No updated packages
    Traceback (most recent call last):
    File “C:\Program Files\Sublime Text 3\sublime_plugin.py”, line 549, in run_
    return self.run(edit)
    File “C:\Users\Bill\AppData\Roaming\Sublime Text 3\Packages\GearboxSencha\class_functions.py”, line 195, in run
    root = JsDuck.detectRoot(sublime, active_file_path);
    File “C:\Users\Bill\AppData\Roaming\Sublime Text 3\Packages\GearboxSencha\libs\JsDuck.py”, line 160, in detectRoot
    if curFile.startswith(os.path.join(folder, ”)) :
    AttributeError: ‘NoneType’ object has no attribute ‘startswith’

    • Mo de Ruiter says:

      Hi Bill,

      It looks like your current file doesn’t belong to a project, to be sure: check the Sublime status bar, it should say “Active file path does not contain project”.
      Since this plugin is really aimed at use in projects (and that’s where it’s real power is at), it expects a project to work with.

      That said, the case where there isn’t a project could be handled a bit more gracefully. We’ll look into that for the next version, thank you for your feedback.

  4. Ivan Jouikov says:

    My command line:

    Ivans-MacBook-Pro:CSC ivan$ jsduck –version
    JSDuck 5.3.4 (Ruby 1.9.3)

    Sublime log when running the gearbox “rebuild jsduck” command:

    Traceback (most recent call last):
    File “./sublime_plugin.py”, line 362, in run_
    File “./class_functions.py”, line 195, in run
    File “./libs/JsDuck.py”, line 167, in detectRoot
    File “./libs/JsDuck.py”, line 199, in getSettings
    AttributeError: ‘list’ object has no attribute ‘copy’

    Is the idea here that my project is supposed to be somehow specially configured for jsduck? I don’t recall seeing those type of instructions. Please advise!

    Thanks

    • Rob Boerman says:

      No, when you created your ExtJS (4 or 5) project with Sencha Generate, everything should be ok. This looks more like a Sublime Text or python version problem. What version of Sublime Text are you running? We are on the latest version of Sublime Text 3.

    • Rob Boerman says:

      Did you adjust the user settings of the plugin? If so, could you specify what they are? You can also ping me on twitter (@robboerman)

  5. Ivan Jouikov says:

    I was able to follow the GitHub instructions to install it via the package manger. I’m able to use code snippets now (i.e. “cr”+TAB for create).

    However I’m unable to use code completion. I do see “Gearbox: rebuild JsDuck” in my command list, but when I run it absolutely nothing happens. No error messages, no feedback. At this point, this is just a snippet generator for me.

    Please advise!

    • Rob Boerman says:

      Hi Ivan. Can you open the Sublime console (CTRL-`) and then run the rebuild command? Probably JSDuck cannot be found.if you send me the output I will have a look. Cheers

  6. Ivan Jouikov says:

    Clicking the “Get it now from the Gearbox Store” takes me to page to buy “Excel import/export” huh?

Leave a Reply

Your email address will not be published. Required fields are marked *

thirteen − 12 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>