ExtJS Textmate bundle
January 10, 2009 8 Comments
** 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.
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!
@Mitchel that’s great, glad you like them
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
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 🙂
@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.
@Ed
Well thats not very encouraging…lol 🙂 I guess that makes Aaron the smartest guy in the office 🙂
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
Great man,
I love your work