27 February 2008

Several Quick ExtJS Tips

Just some stuff I've come across:

1) When creating multiple GridPanels in one page, don't try and be cheap and use the same SelectionModel for multiple grids. Create a new one each time, or you'll get errors. [Source]

I encountered this problem when creating multiple grids and using a common config object that had been pre-rendered to save time. It'll look like it's working at first, but then JavaScript errors will start popping up as you click on rows, or cells, or whatever the particular SelectionModel you've chosen is supposed to select.

2) Tired of constantly having to create individual stylesheet entries everytime you want to use the "iconCls" parameter when configuring ToolBar buttons or menus? Well, make you up a quick little function like the following:

var makeIconCls = function (className, url, id) {
'.' + className + '{background-image: url(' + url + ') !important;'
+ 'background-repeat: none;}'
, id
return className;

... and just put "makeIconCls('[class-name]', '[url.to.image]', '[reference-id]') instead of just a string variable whenever using the "iconCls" parameter.

3) Well, this isn't really a ExtJS tip, just a JavaScript tip in general -- ever wondered why you sometimes create a function with
function [function name]([params])

and other times you use
var [function name] = function([params])

Well, if you find out, tell me. :P Seriously, all I've discovered is that you can somewhat "defer" the defining of a function by using the "var [function name]" method, while if you use the command "function" directly, the function can be defined long before any lines of code above it are even processed. Make sense? I'm sure there's some good reason for this... right?


  1. In regards to the different ways to define functions.

    function blah() {}
    Creates a function object during variable instantiation.

    var blah = function() {}
    Creates a reference to an anonymous function, but the actual object is not created until execution.

    This is a good article I ran across a while back on Javascript Closures - http://www.jibbering.com/faq/faq_notes/closures.html

  2. Aye, that's what I figured. So, use "function blah() {}" for singletons only. Got it. :P