DC Meetup Videos

We held the first in a series of meetups that will happen in the DC/NoVA area last week, a sprout of our Baltimore area Meetup for our southern friends, and I have to say that it was a huge hit. The meetups are going to be managed by Pat Sheridan from Three Pillar Global, and we are hoping it will be a way to get JavaScript developers from the DC area more involved in the community. Jay was kind enough to bring video equipment and record our presentations, along with editing the videos and posting them to the intertubes.

There are some photos and other information about the event on its meetup page.

If you are in the Baltimore area and into JavaScript with a fury, you should visit our Meetup that happens the first Wednesday of each month at 6:30PM in the Beehive Baltimore. This month’s meetup has a presentation from Paul Barry about Node.js – it’s gonna be bad ass.

Speed Testing

My little addiction I like to call speed testing has rolled into full swing. Now that I have the tools in place to create and launch tests, along with run reporting on the results with ease, I can pretty much just sit down and spend 30 minutes or so to design and launch the test. I have two tests currently gathering data, one is testing the speed of rendering an image with and without a data URL, the other has to do with the speed of code wrapped in a try catch statement. Should be some interesting results, which I will be posting a summary on soon. My first test was for JSON decoding speed, which I posted results for a couple of weeks ago.

HtmlEditor Plugins

The Ext JS team has expressed an interest in including my HtmlEditor Plugins as a UX in the SDK. This will mark the third development of mine that has become part of the Ext JS SDK download, first it was the GMapPanel UX, then the Grid Filter backend PHP code, now it seems that the Ext JS SDK will finally come with a more robust HtmlEditor example. A few updates have been committed recently that add the option to change the language in these plugins, along with some general code cleanup. Also starting to move my code over to Github as suggested by many.

Books

Soon we will have Jay Garcia’s Ext JS in Action book released in print, and the 2nd edition of Learning Ext JS should be released later this year, titled “Learning Ext JS 3.0″. Cutter, Colin and I got together to update the book, fix some errors, and add new chapters to take advantage of new features in Ext JS 3.0. It’s gonna be an awesome resource for anyone just getting started with Ext JS.

JSConf

Again, JSConf is being held in the DC area, which makes it incredibly cheap for me to attend, but this year I decided to try my hand at submitting a talk proposal. I can’t wait to find out if I will be chosen. My submission was for an introduction to rapid application prototyping using the Ext JS library. Here is my submission:

{<br /> “name”:”Shea Frederick”,<br /> “email”:”________@________.com”,<br /> “twitter”:”VinylFox”,<br /> “location”:”Baltimore, MD”,<br /> “topic_title”:”Rapid Web Application Development with Ext JS”,<br /> “topic_description”:”Discuss general principles of the Ext JS library<br /> and show how easy it can be to rapidly prototype a web application<br /> using the library.”,<br /> “claim_to_fame”:”One of the core contributors to the Ext JS library<br /> along with other Open Source JavaScript projects. Author of<br /> ‘Learning Ext JS’ published in December 2008. Observed ‘Talk Like<br /> a Pirate Day’. Maintain a Blog of JavaScript fun at<br /> http://www.vinylfox.com”<br /> }

Did I mention that all submissions have to be in the form of valid JSON? Yeah, geeky, but good – very good. With any luck, I will find out later this week if ive been accepted.

Yeah, so what?

The problem comes when we want to mask a part of the screen, but also want the elements behind that mask to continue responding to user interaction. This behavior is counter to most native behavior. What we are left with, is having to forward mouse events through the masking layer to the layer below, an option that simply does not exist in the standard JavaScript/DOM API.

Why do this?

A plugin that I recently wrote – DataDrop - used a textarea overlaying a grid to act as the receiver of dragged data from spreadsheet type programs. One of the limitations that I was not so happy about was the fact that this overlay could only exist in the ‘empty’ area of the grid, not over rows of data, headers, toolbars, etc. otherwise it would cause all of those elements below to become unresponsive to user input. If our textarea that receives the data were positioned over the entire grid area, our GridPanel could not be controlled using the mouse anymore.

How to fix this?

This is where my friend Nige White (Animal) came in to help, it turns out that he had an idea about how to forward these mouse events using a couple of not well understood methods in the JavaScript/DOM API used for creating mouse events. Here are the steps taken:

1. The textarea (my masking element) that is positioned over the grid receives mouseover, mousemove, mousedown , mouseup and other events.
2. The top masking layer is hidden for a moment, so we can figure out what element is below the mask at the event location.
3. The event is re-fired – this is where the W3 DOM Event model and the simpler Microsoft equivalent come into play.
4. Start the process again – ready for the next event.

What’s element to fire upon?

Knowing the cursor position and event that occurred, the only obstacle now is determining what DOM element to fire the simulated event through. It turns out that finding which element is the topmost element at a certain document coordinate position is quite simple in modern browsers. The document.elementFromPoint method is supported in IE, Mozilla, Webkit and Opera.

So it is possible to capture the document coordinates of a mouse event fired on the masking element, momentarily hide that masking element, and then ask the document what is under that coordinate position before showing the mask again.

A new event can be then fired on the found element. Obviously there are some complexities such as firing mouseover and mouseout events when the found element is different from the last time, but that is the gist of the technique. To see it in action, check out the screencast or play with the live Grid DataDrop example or simple DOM element example yourself.

I have posted an override of Ext.Element that Nigel created on my Google Code site for all to enjoy, it is now a requirement for the ExtJS DataDrop plugin. A big thanks goes out to Nige (Animal) for digging into the nuts and bolts of JavaScript to find a solution to my problem.

The Next Step

Having the data that is dropped into the grid automatically insert into the grids rows at the correct position is my next task for the ever-improving DataDrop plugin. Should be fun :/

UPDATE (12-1-09): Seems that Mozilla has also noticed this issue.

this.config[col] is undefined

The autoExpandColumn feature of the ColumnModel accepts an ‘id’ as the argument, this ‘id’ needs to match the ‘id’ given to the Column configuration.

{<br /> columns: [{<br /> id: 'not_so_super_column_id', // column id defined<br /> header: 'Super Duper',<br /> dataIndex: 'superduper'<br /> }],<br /> …,<br /> autoExpandColumn: ‘super_duper_column_id’ // wrong column id used – fail!<br /> }

Another thing to keep in mind, is that while it works sometimes, the value for autoExpandColumn should NOT be a column index – the id of the column should always be used.

types[config.xtype || defaultType] is not a constructor (b[d.xtype || e] is not a constructor)

This happens when trying to instantiate (create) a component that does not exist, the most common reason is a typo or spelling error. For instance, using ‘gridpanel’ as the xtype instead of ‘grid’ – which is a mistake I make often myself. Sometimes we can forget a level of namespacing, like using Ext.FormPanel instead of the proper Ext.form.FormPanel.

{<br /> xtype: ‘formpanel’ // fail<br /> },{<br /> xtype: ‘form’ // win!<br /> }

Another one I always run into is typing ‘combobox’ instead of the correct ‘combo’ for the xtype – a list of xtypes can be found in the ExtJS documentation under Ext.Component.

this.addEvents is not a function

This is not a new problem (you like that pun?) but unfortunately the error message sends us off in the wrong direction. When this message appears it sounds like its an event related problem, but what it simply means is that we have forgotten to preface a constructor with the ‘new’ operator.

Ext.form.TextField({}); // fail<br /> new Ext.form.TextField({}); // win!

el is null

So with this one, its a little easier to figure out what went wrong just from the error message. In shorthand variable naming, a couple of letters are picked out of a longer word that phonetically make sense, and do not spell something else or sound like other commonly used words. So in this case ‘el’ is short for ELement. As the error message says ‘el is null’, which if we translate from geek speak to English it says ‘html element does not exist’.

</p> <div id="sweet_dude"></div> <p>new Ext.Button({<br /> text: ‘Clicky’,<br /> renderTo: ‘dude_sweet’ // does not match the id!<br /> });

f.convert is not a function

This one is not so common, but still happens every once and a while. It means that your data reader was trying to read the data you passed to your store with a particular data type that did not exist. Thats allot to take in, so lets take a look at this example.

var myStore = new Ext.data.ArrayStore({<br /> fields: [{<br /> name:'fullname',<br /> type:'badass'<br /> }, {<br /> name:'first',<br /> type:'string'<br /> }]<br /> });

In this example the ‘fullname’ column has a datatype of ‘badass’, which does not exist. On the flip side, the datatype for ‘first’ of ‘string’ does exist.

Summary

Now if we can just keep these in our memory, we might be able to have a productive day -or just drink more coffee and see how that pans out.

JSMag’s blog post outlined their reasoning and intentions with this new piece:

…some of the feedback received has led us to introduce a new column this month. A recurring piece of feedback so far has been that much of the content appeared to be more advanced than many readers felt they could deal with. To that end, we’re introducing a new writer and column to our line up – Shea Frederick.

JSMag Editor

My first piece went out in the July issue of JSMag, and other than complaints from non Steelers fans (you know who you are) I was very happy with the resulting article.

Shea will be covering topics of interest to developers new to JavaScript, and perhaps even new to programming in general. His first piece this month is “Choosing a JavaScript Library” which can help someone new to the JavaScript scene understand the various options and make an informed decision.

JSMag Editor

Looking forward to increasing JavaScript’s stranglehold on the world!! muhahaha!!! (evil laugh)

ExtJS Themes

Ive been playing with ExtJS themes lately, and im having a blast creating some very fancy looking stuff. It really is amazing how quickly you can make ExtJS widgets not look like ExtJS widgets anymore. Goodbye default theme.

Keep an eye out here for stuff to do with creating themes for ExtJS, you will not be disappointed.

JavaScript User Group

The Baltimore/DC area is a hotbed of IT work. A good portion of the work here is web related, and a chunk of that of course is JavaScript related, so for the past six months I have been hosting a JavaScript meetup group in Columbia, MD (halfway between Baltimore and the District). I have throughly enjoyed meeting people in my field, and discussing various things which are most often, but not always related to JavaScript.

Our next meetup on August 4th has a local JavaScript guru Lokesh Dhakar giving us his insights into user interaction. Please come out and join us if your in the area, we always have a great mix of local badasses and newbies show up. A few local business pitch in to make this happen every month, OmniTI provides our meeting space, and Mind Over Machines keeps our bellies full of pizza – thanks goes out to both of them.