Gearbox Sublime Gear - ExtJS and Sencha Touch plugin for Sublime Text
Python Shell
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Default (Linux).sublime-keymap
Default (OSX).sublime-keymap
Default (Windows).sublime-keymap

#Gearbox Sublime Sencha Congratulations! You're about to supercharge your Ext JS development. The Gearbox Sublime Sencha plugin aids development with snippets, shortcuts and a little bit of magic.

##Prerequisites In order to use this package to its full extent, you should first install:

##Installation The easiest way to install this package is through sublime package control, we reccommend you install it, if you don't already have it. Then from your Sublime Text editor, open the command prompt (default: Ctrl + ⇧ + P or ⌘ + ⇧ + P) and type "package control install package". Press enter to start the package control (may take a couple of seconds to load), then search for "GearboxSencha".

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!

##Related Files The related files plugin helps you quickly switch between files that are strongly related, like the Model, View and Controller of the same type.

##Commands The listed keycodes are the defaults. You can change them in the configuration.

Related Files

command: related_files
Linux shortcut: alt+shift+p
Mac OSX shortcut: alt+shift+p

Related Files Lucky

command: related_files_lucky
Linux shortcut: ctrl+shift+alt+p
Mac OSX shortcut: ctrl+shift+⌘+p

Class related classes

command: class_related_classes
Linux shortcut: super+alt+p
Mac OSX shortcut: ⌘+alt+p

Class functions

command: class_functions
Linux shortcut: super+alt+r
Mac OSX shortcut: ⌘+alt+r

Class properties

command: class_properties
Linux shortcut: super+alt+ctrl+r
Mac OSX shortcut: ⌘+alt+y

Restart Sublime (dev only)

command: restart_sublime
Linux shortcut: f5
Mac OSX shortcut: f5

Rebuild jsDuck

command: rebuild_jsduck
Linux shortcut: super+alt+j
Mac OSX shortcut: ⌘+alt+j


Snippets speed up your development by shortening the code you write over and over again. Like a class definition. The Gearbox Sublime Sencha Gear offers four kinds of snippets:

###Ext JS specific snippets


tabTrigger: afterRender
selection: Added as the function body
Adds an afterRender method to your class, with a call to the parent.

afterRender: function() {


tabTrigger: callParent
Adds a call to the parent with arguments.

return this.callParent(arguments);


tabTrigger: constructor
Adds a constructor with ApplyIf and a call to the parent.

constructor: function(config) {

	Ext.applyIf(config || {}, {

	return this.callParent(arguments);


tabTrigger: create
after: Ext.Component, config
Creates an Ext.create statement.

Ext.create('', {


tabTrigger: define
after: name, parent, xtype, body
selection: Added as body
Creates an Ext.define statement.

Ext.define('', {
	extend: 'Ext.',
	xtype: '',


	mixins: [

	logLevel: 'debug',




tabTrigger: requires
Adds an empty requires array.

requires: [


tabTrigger: initComponent
Inserts Ext JS' initComponent function, with a call to the parent.

initComponent: function() {


tabTrigger: items
Inserts an array of objects.

items: [{


tabTrigger: mixins
Adds a mixins block with some default Gearbox mixins.

mixins: [

logLevel: 'debug',


###Definition snippets

tabTrigger: f
Adds a new anonymous function.

function() {


tabTrigger: fn
Inserts a new anonymous method.

: function() {



tabTrigger: function
Adds a new anonymous function with a debug line.

function() {


###Gearbox snippets log

tabTrigger: log
selection: As argument to the logger.
Adds a call to a local logger: this.log.


log variable

tabTrigger: logv
Add a log showing the value of a variable.

this.log('', '=', );

log annotated

tabTrigger: loga
Same as logv, but with an annotation.

this.log(':', ' =', );

###Convenience snippets console.log variable : tabTrigger: clogv
Add a console.log statement to output a variable and its value.

console.log('', '=', );


tabTrigger: debug
after: The object to debug
Adds a call to this.debug with arguments as the default argument.



tabTrigger: each
Adds a lodash each block.

_.each(arr, function(item, key) {
	console.log('item:', key, '=', item);


tabTrigger: eachPush
Same as each, but push each item to an array.

var items = [];
_.each(arr, function(item, key) {
	console.log('arr:', key, '=', item);


tabTrigger: dashes
Adds a line of dashes.



tabTrigger: map
Adds a lodash map block.

var items =, function(item, key) {
	this.log('arr:', key, '=', item);

	return item;
}, this);


tabTrigger: next
Create a new function with a next function as argument.

function(next) {


tabTrigger: Promise
Add a return Promise block.

return new Promise(function(resolve, reject) {

###Testing snippets describe

tabTrigger: describe
Insert t.describe block.

t.describe('', function(t) {


tabTrigger: it
Insert block.'should ', function(t) {


tabTrigger: requireOK
Insert a requireOK block.



tabTrigger: startTest
Insert a startTest block.

startTest(function(t) {


All configuration options explained.


Snippet templates used to insert properties into the file < name > gets replaced with the property name. This format uses 1 array entry per line, and supports Sublime Snippet features.

"String": [
	"<name>: '$1'"
"Boolean": [
	"<name>: ${1:false}"
"Object": [
	"<name>: {",
	"	'$1': '$1'",
"Array": [
	"<name>: [",
	"	${1:''}",
"Number": [
	"<name>: ${1:0}"


Snippet templates used to insert functions into the file < name > gets replaced with the property name. This format uses 1 array entry per line, and supports Sublime Snippet features.

"<name>: function(config) {",
	"	this.callParent(arguments);",
	"	$1",

###Advanced These settings are only for advanced users. For a normal project, you won't need to edit any of this.


This is an experimental feature still being worked on, it will try to update class information in the background.

"enabled": false,
"interval": 300


Paths the plugin will look for a valid application folder, relative to working directory root.



Paths where the plugin will look for valid jsduck formatted data to use to provide related functions/properties/classes, relative to application folder.



Folders to include when building jsduck information, relative to application folder.



Only edit when you really know how jsduck and this plugin works.

####relatedFilesPatterns This is done using a regexes, but don't despair; you don't need to configure anything.

#####Where to look in general The file contains a big commented regex and a couple of smaller regexes, the big one tells the plugin where to look for your js files, the smaller ones tell it where to look for related files.

Here's the big one:


Scary, huh? Fear not, for a normal project, you'll need not edit anything. This regex describes the general structure of your project.

#####Where to look for related files. Search for any files matching the following structure($1=currentModuleName, $2=currentFileName):