30 Sep 2007 8:29 PM #1
Popular Baby Names app
Since my wife and I are expecting our first child in April, I was worried about choosing a baby name. So, I created a Google Maps mashup with popular baby names statistics from around the world to help in my search.
I went looking for a pop-up dialog and came across ExtJS. After using the basic dialog, I quickly hooked up the data grid for showing name stats. The tabs and AJAX update manager provided a great way of showing info on a particular name. The Aero theme also fit in great with my site.
It was a breeze hooking all this up. I used Ruby on Rails on the back-end with Prototype underneath ExtJS. The whole thing took about a month part-time (evenings and weekends). I'm a Java Swing developer by day so my web skills are pretty rusty and yet ExtJS was easy even for me to use!
Thanks a bunch to the ExtJS team for putting together a great library and toolkit with excellent documentation. I'm looking forward to using more of ExtJS in the near future. Keep up the great work!
30 Sep 2007 11:06 PM #2
That's really impressive, well done! Looking forward to seeing some UK data in there.
Is the tabbed popup from a map pin part of Google Maps's API? I haven't seen one quite like that before.
1 Oct 2007 2:28 AM #3
very good! a big hand!
where did you got all the data from?
ah - one more: can you give me a hint how you realized the rating? i have to do this as well.
1 Oct 2007 6:34 AM #4
@bitdifferent: Thanks! Google Maps provides a tabbed info window (GInfoWindowTab). Most developers don't need it, but it worked great for showing popular names for both girls and boys. This week I plan on adding a bunch more popular name statistics, including from the UK.
@steffenk: Thanks! The public domain data comes from various government Vital Statistics offices. All I'm doing is aggregating it for easy display on a map. The 5-star rating feature is a mix of the Rails acts_as_rated plugin, Prototype Ajax.Request calls, and a CSS/Image rater from Komondo. I hope to blog in more detail about how things fit together in the next month or so.
1 Oct 2007 2:22 PM #5
Overall an awesome public-facing Ext app.
Just a few suggestions to hopefully make it even better.
- It'd be nice to have a horizontal slider like Google's vertical zoom in/out slider. The custom vertical one would be for selecting the year of data to represent in the dialogs.
- Attach your dialog creation functionality to the rowclick event of the grid. Right now you have to click the actual name, which isn't intuitive since the entire row highlights when you mouse over implying that clicking anywhere in the row does something.
- Check out how to alter the baseParams for a grid to send in searching and filtering paramaters. This will make it so clicking the letters above the grid (wouldn't they look awesome as buttons in a toolbar above?) will load new data without a reload of the page.
Ext JS - Support Team Volunteer
Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.
Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.
1 Oct 2007 2:34 PM #6
Great suggestions Jeff. I'll give them a try soon. I especially like the "time-based" slider idea. That would be very slick.
1 Oct 2007 11:59 PM #7
oh i love this forum and the way of presenting and discussion
btw the rating stuff.It would be a nice idea to base it on ext. With the Komondo basic it should be possible, i will give it a try. It's great that you will offer some techniques on your blog, maybe also here ?
4 Oct 2007 10:05 AM #8
Yea, totally awesome . Hopefully projects like yours will inspire me to get out and do some fun Ext stuff outside of work that I can share.
My one comment about the name grid is that I found the action and view icons/buttons a bit awkward. I had to hover each one to figure out what it is.
I have the same problem of how to present a bunch of actions that can be applied to a row selection, either 'only one' or 'one or more' rows. The way I've got it right now, they are a drop down in the toolbar with the menu items having both icons and text. I'm not completely satisfied with this.
Another option I've been thinking about is to having a button in the row that shows a pop menu. This would keep the user in the row context, since they don't have to jump up to the toolbar to do stuff.
6 Feb 2008 7:17 PM #9
Baby Name Map upgraded to ExtJS 2!
I've updated the Baby Name Map to ExtJS 2 and added a new navigation tree of countries and regions for quickly moving around the map. I'm definitely liking the new, more consistent API for ExtJS 2.
I wanted to send a big thank you to the ExtJS development team as well as all the helpful people on these forums.
11 Feb 2008 8:14 AM #10
Just a quick note, IE6 is a favourite in corporate environments (mine included), and I understand ExtJS 2.0 will work with IE6, so it might be worth trying to include them too. Particularly considering that most, if not all corporate users are unable to change their browser of choice.