ExtJS Textmate bundle

** Update 2: I’ve recently cleaned up the bundle, removing stale snippets. It’s now located at https://github.com/edspencer/Sencha.tmbundle

** Update: Added extra instructions when downloading the bundle instead of git cloning it. Thanks to TopKatz for his help**

I develop on both OSX and Windows machines, and my editors of choice are Textmate and the excellent Windows clone E. One of the great things about Textmate is its bundle support, which allows you to create reusable code snippets (among other things).

I’ve got a good collection of these built up so thought I’d make them available on Github. You can install it like this:

Mac OSX:

cd ~/Library/Application Support/TextMate/Bundles
git clone git://github.com/edspencer/Sencha.tmbundle.git

Windows:

cd C:Documents and Settings{YOUR USERNAME}Application DataeBundles
git clone git://github.com/edspencer/Sencha.tmbundle.git

If you don’t have git installed you can simply download the bundle as a zip file, and extract it into the directory as above. You need to rename the extracted directory to something like extjs.tmbundle or it won’t show up. If you do go the git route you can of course cd into that git directory at any point and use git pull to update to the latest bundle version.

I’ll give one example of the usefulness of snippets like these; here’s the Ext.extend snippet from the bundle:

/**
 * @class ${1:ClassName}
 * @extends ${2:extendsClass}
 * ${5:Description}
 */
${1:ClassName} = function(config) {
  var config = config || {};
 
  Ext.applyIf(config, {
    $0
  });
 
  ${1:ClassName}.superclass.constructor.call(this, config);
};
Ext.extend(${1:ClassName}, ${2:extendsClass});

${3:Ext.reg('${4:xtype}', ${1:ClassName});}

To use this you can just type ‘extend’ into a JS file in TextMate/E and press tab. The snippet takes you through a few editable areas such as the name of your new class, the name of the class you’re extending, xtype definition and description, then dumps the cursor inside the Ext.applyIf block. The actual characters typed are these:

extend [tab] MyWindow [tab] Ext.Window [tab] [tab] mywindow [tab] Special window class [tab]

Which produces this:

/**
 * @class MyWindow
 * @extends Ext.Window
 * Special window class
 */
MyWindow = function(config) {
  var config = config || {};
 
  Ext.applyIf(config, {
    
  });
 
  MyWindow.superclass.constructor.call(this, config);
};
Ext.extend(MyWindow, Ext.Window);

Ext.reg('mywindow', MyWindow);

Hopefully it’s obvious how much time things like this can save when generating repetitive, boilerplate code. The extend snippet is one of the larger ones but even the small ones are very useful (pressing c then tab is much nicer than typing console.log(”); each time).

Any suggestions/contributions are welcome. Thanks go to rdougan for his contributions and organisation also.

There is also another ExtJS textmate bundle available at http://hakore.com/extjs.tmbundle/, written by krzak from the Ext forums.

8 Responses to ExtJS Textmate bundle

  1. Mitchel Humpherys says:

    Hey, I hope you don’t mind, but I’ve converted a bunch of your tm snippets over to yasnippet and have added them to a stockpile of Ext yasnippets on this thread over at the Ext forums: http://www.extjs.com/forum/showthread.php?p=417262

    Thanks for the snippets, I love them!

  2. Ed Spencer says:

    @Mitchel that’s great, glad you like them

  3. Hi Ed,

    Thanks for sharing these snippets.. they are great! I also like the fact that you are coming to extjs as lead developer from a ruby on rails background.

    Maybe you can improve how extjs works with rails 3, or the other way around?

    Cheers,
    Alastair

  4. Donald Organ says:

    There must be someone in your office using Linux. What are they using and does it have any pouting like this?

    Inquiring minds would like to know 🙂

  5. Ed Spencer says:

    @Donald

    I think we have just a single person using linux in the office (that is of course the ever-contrarian Aaron Conran). As far as I know he likes to type every character on his exceptionally loud Microsoft keyboard, largely to let the rest of us know he’s around. The rest of us all use OS X, with the exception of the Java guys who are on windows.

  6. Donald Organ says:

    @Ed

    Well thats not very encouraging…lol 🙂 I guess that makes Aaron the smartest guy in the office 🙂

  7. Hey Spencer,

    Is this bundle up-to-date? If not, do you have any hints on where it is possible to get a good one?

    Best regards
    Danila

  8. Guido Wehner says:

    Great man,
    I love your work

Leave a Reply to Donald Organ Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: