Copy
Articles: Ext JS 4 Preview, Event Delegation in Sencha Touch and App Contest » Sencha News You are receiving this email because you expressed interest in Sencha products and news. View in browser »
Welcome to the third edition of Sencha News — this edition features a preview of Ext JS 4 and some insight into events in Sencha Touch. Don’t miss the details of our Sencha Touch App Contest, and take advantage of an exclusive discount for SenchaCon.

We look forward to getting your feedback on topics and information you’d like to see. Send email to newsletter@sencha.com.

Thank you for being part of the Sencha community.
In this Issue
Ext JS 4 Preview: Refactoring and Standardizing the Rendering Process by Jamie Avins
Over the past 4 years, the Ext JS codebase has evolved; new components have been added and coding standards have improved. During this process, it was necessary to go back every so often to refactor older components and keep processes in sync.
Until Ext JS 4, there has been no standard way to render components. In the past, Panels rendered primarily by creating the elements they needed and adding them to the dom directly, picking up references along the way. Fields on the other hand, manipulated the autoEl DomHelper configuration and then wrapped specific html fragments as needed. Grids made extensive use of templates to build up their markup and inject it into the page.
For Ext JS 4, our goal is to unify these techniques into one cohesive standard by leveraging XTemplate and DomQuery. This standard is easy to work with and allows developers the flexibility required to develop robust components. This standard will be used internally across all of our components.
Introducing renderTpl, renderData, and renderSelector
All components in Ext JS 4 are rendered with a base div element which provides a unique id, and baseline component classes (cls, cmpCls, baseCls, and ui). If additional elements are needed to create a component, they are now handled with an XTemplate (renderTpl). Data for the XTemplate is read from a renderData object and Ext.Element references can be placed on the component instance via renderSelectors. The renderSelector is scoped from the base div element and uses standard css selectors. These Ext.Element references are part of the component lifecycle and removed automatically when the component is destroyed. The following example will help illustrate the creation of a custom component:
Simple custom icon component example:
IconComponent = Ext.extend(Ext.Component, {
   iconCls: 'myIcon',
   renderTpl: '<img alt="" src="{blank}" class="{iconCls}"/>',
   initComponent: function() {
       Ext.applyIf(this.renderData, {
           blank: Ext.BLANK_IMAGE_URL,
           iconCls: this.iconCls
       });
       Ext.applyIf(this.renderSelectors, {
           iconEl: '.' + this.iconCls
       });
       IconComponent.superclass.initComponent.call(this);
   },
   changeIconCls: function(newIconCls) {
       if (this.rendered) {
           this.iconEl.replaceClass(this.iconCls, newIconCls);
       }
       this.iconCls = newIconCls;
   }
});
The renderTpl defines an XTemplate with “blank” and “iconCls” variables which are read from renderData at render time. In addition, an “iconEl” reference to the Ext.Element is applied to the instance at render time. The changeIconCls method can now use the iconEl as soon as the component has been rendered.
Event Delegation in Sencha Touch by Tommy Maintz
Recently, we were asked to analyze the performance of an application made with Sencha Touch. One of the main problems we found was the use of inline event handlers on items inside Lists and DataViews. This showed me that although more experienced Ext developers may know how to properly use event delegation, many new developers using Sencha Touch may not. So here, I will give a quick overview of what event delegation is, and how you should take advantage of it in Sencha Touch.
The most common use case for event delegation is probably in Lists. Often you will want to bind a listener to a specific element that exists in each row of a List (for example the avatars in a list of users). Many developers might be inclined to add an inline onclick attribute to each one of these elements. This has a couple of major drawbacks. First and foremost, it means that the browser will use memory for each one of these listeners. It also has a negative impact on the overall performance of the application. Having event listeners on many elements in the DOM generally slows down the rendering of, and interaction with, the page. This is especially the case on mobile devices with limited hardware capabilities.
To avoid this, you should use a technique called event delegation. Event delegation refers to the use of a single event listener on a parent element to listen for events happening on its children. To achieve this, we can rely on the fact that browsers bubble up events to their parents until they reach the window object.
An added benefit to event delegation is the fact that when we add new children to the parent, they will automatically start triggering our events. Also, when you remove children from the parent, you don’t have to clean up all the event listeners to avoid memory leaks. This is actually what happened in the Sencha Touch application that I mentioned at the beginning of the article. Many items in their Lists were being removed, but the inline event handlers weren’t being cleaned up, causing crashes on the iPad.
In Sencha Touch, we provide developers with ways to easily achieve event delegation. Let’s look at a simple scenario. Suppose we have the following DOM structure somewhere on the page:
<ul id="user-list">
    <li><img src="avatars/dave.png"/><h1>David Kaneda</h1></li>
    <li><img src="avatars/ed.png"/><h1>Ed Spencer</h1></li>
    <li><img src="avatars/aaron.png"/><h1>Aaron Conran</h1></li>
    <li><img src="avatars/jamie.png"/><h1>Jamie Avins</h1></li>
</ul>
Using the Element class in Sencha Touch, we will bind a single listener to the ‘user-list’ element that will delegate any clicks made on the avatars. The code would look like the following:
Ext.fly('user-list').on({
    tap: myHandler,
    delegate: 'img'
});
The value for the delegate option is a CSS selector. If we would have put a class on each one of the avatars called ‘avatar’, the value for delegate could have been ‘.avatar’.
In the previous example, we have used a low level API in Sencha Touch to bind our listener. More often, you will want to add the same behavior to items in a higher level widget like a List. Imagine we have a List with a template that generates the same markup as we have shown before. In that case, we can bind our listener like this:
var list = new Ext.List({
    tpl: '<tpl for="."><li><img src="{avatar}" /><h1>{name}</h1></li></tpl>',
    listeners: {
        el: {
            tap: myHandler,
            delegate: 'img'
        }
    }
});
Each Component in Ext supports the listeners configuration. Usually, you will define handlers for custom events like itemtap or selectionchange. Recently, we have also added support for binding DOM events to these components. Lists (like any Component) have a property called ‘el’. This is what we used in our previous example as the Element that we bind our tap handler to. Since List extends Panel, it also has a property called ‘body’, which means that the following listeners configuration would have also worked:
listeners: {
    body: {
        click: myHandler,
        delegate: 'img'
    }
}
This is actually better in this case, since you might have docked items with images inside your List, which would be trigger our listener as well. In general, it is always good practice to choose the lowest parent that contains all the children.
I hope this short article has helped you understand the benefits of event delegation. I have only touched the surface of what is possible with this technique, and I leave it up to you to find more clever uses for this powerful concept.
Sencha Conference by Michael Mullany
Enter the Sencha Developer Contest
Developing great mobile apps with Sencha Touch? Create an app and get it reviewed by a panel of industry experts. It could be worth up to a cool $15,000 in cash and prizes. Get together with a group of up to five developers and create a mind-blowing Sencha Touch app!
See here for more details »
We’re looking forward to seeing you in November for Sencha Conference. We have a great line-up of sessions and speakers, so we hope you'll be able to attend and learn about our current projects, upcoming releases, and emerging web technologies.
Latest Update on Sessions & Speakers
You can see the great line-up of speakers and sessions, so you can plan your time at Sencha Conference. Our newest sessions and speakers are John Donovan, Chief Technical Officer AT&T, giving the keynote presentation; and James Pearce, giving a session on Integrating Sencha Touch with Content Management Systems.
Hackathon and Component Makers Marketplace
We’ve had a huge response to the Hackathon on Monday evening. So we’ve moved it to a larger room to accommodate as many people as possible. At the Hackathon, you have a chance to work with other attendees or on your own to put together a prototype in three hours, then do a lightning demo. There will be Sencha experts on hand if you'd like to get advice and help.
The next day (Tuesday), Brian Moeskau, creator of the upcoming Ext-Calendar-Pro, will host a “Component Makers” session. You’ll get five minutes to present your component and talk about how you developed it. Brian is currently putting together the roster, so if you’re interested in presenting your Ext JS, GWT or Sencha Touch component, send him an email at brian@ext.ensible.com.
Event Sponsorships
RIM BlackBerry Logo We're pleased to announce that RIM is our Sencha Conference Platinum Sponsor. Research In Motion is a leading designer, manufacturer, and marketer of innovative wireless solutions for the worldwide mobile communications market. Research In Motion will speak about the new BlackBerry WebWorks platform. WebWorks enables developers to use absolutely standard web technologies to build mobile applications for the BlackBerry platform. For more information, visit www.rim.com.
We still have sponsorship opportunities available for the hackathon and our coffee breaks, so if your company is interested send an email to conference@sencha.com.
If you or your colleagues haven’t registered for the conference yet, don’t miss out on the exclusive discount for Sencha newsletter subscribers. Get an additional $100 off the already discounted price of $1,095 when you register by Friday, October 29th and use the Google Checkout coupon code: “octconfpromo”. Be sure to take advantage of it! We look forward to seeing you in November.
Sencha Training by David Marsland
Join us for Open Training Sessions in Chicago, San Francisco, London, and DC!
Join us for onsite and open training sessions on Ext JS, Ext GWT, and Sencha Touch. Sign up today »

The Sencha Training Experts are coming to Chicago, San Francisco, and London to help you master Ext JS, Sencha Touch, and Ext GWT! From beginning JavaScript and CSS to custom component creation and CSS theming, you will learn how to bring it all together by creating innovative web and mobile user interfaces with hands-on training led by a member of the Sencha Core Development Team. Choose from the schedule below:
Chicago - Oct. 26-29, 2010
Oct. 26 Ext101 - JS and CSS Fundamentals, $650/developer      Register
Oct. 27-29 Ext201 - Mastering Ext JS, $1950/developer      Register


San Francisco - Nov. 11-19, 2010 (Pre/Post Sencha Conference)
Excited about attending Sencha Conference, November 14-17, in San Francisco and want hands-on training too? Sign up for these intensive hands-on labs!
Nov. 11-12 Ext200 - FastTrack to Ext JS Development (2 day), $1300/developer      Register
Nov. 18 & 19 ST201 - Sencha Touch Development (1 day), $650/developer      Register
Nov. 18 & 19 ED200 - Accelerated Dev w/ Ext Designer (1/2 day) $325/developer      Register


London - Nov. 29-Dec. 3, 2010
Nov. 29 Ext101 - JS and CSS Fundamentals, £480/developer      Register
Nov. 30-Dec. 2 Ext201 - Mastering Ext JS, £1440/developer      Register
Dec. 3 ST201 - Sencha Touch Development, £480/developer      Register


Washington, DC - Dec. 16-Dec. 23, 2010
Dec. 16-17 ExtGWT201 - Ext GWT Development, $1500/developer      Register
Dec. 20-22 Ext201 - Mastering Ext JS, $1850/developer      Register
Dec. 23 ST201 - Sencha Touch Development, $650/developer      Register


Guarantee your seat by registering today at http://www.sencha.com/training/
Sencha Touch Spotlight: Echo Conference Mobile
What is Echo Conference Mobile?
Echo Conference Mobile is a mobile web application built using Sencha Touch, that provides information to our conference attendees. It features event details including schedule, speakers, sessions, and maps. This mobile web app allowed a majority of our 600+ registered attendees with a smartphone device to access conference information whenever they needed it.
Echo Conference is a media/technology conference where we aim to teach, equip, and lead creative church leaders. Echo Conference Mobile app allows our attendees to make informed decisions on speaker and session information and provides technology that can be used as a source of creative inspiration.
Why We Chose Sencha Touch
Sencha Touch provided us the ability to jump into mobile application development based on our background in web development. By choosing to build a web application, it was quick and easy to deploy and allowed us to make on-the-fly updates, when needed. Echo Conference Mobile web app, built on the Sencha Touch framework, was a perfect fit for our attendees since it has support for Webkit devices and most of our attendees carry iOS and Android devices.
We had very limited development time to meet our conference deadline. Using Sencha Touch, we were able to create a mobile application quickly enough to distribute it at our 2010 conference. We needed nothing more than a text/code editor and any Webkit browser to do on-the-fly testing. Sencha Touch provided all of the UI components we needed, so it took almost no time to do UI design. In the end, we used the default theme with small tweaks for additional content. The entire mobile app was built based on information architecture rather than a UI mockup so using the default Sencha Touch theme just helped bring the data to life.
Here are a few examples of how we used Sencha Touch to build our conference app. (Click the images to see them full-size.)
Schedule list in Echo Mobile's Sencha Touch app Conference location map in Echo Mobile's Sencha Touch app Recent tweets in Echo Mobile's Sencha Touch app


1) Using the Bottom tabs was key to organizing the main content sections of the app. They provided easy visual cues to help users navigate the available content.
2) The Carousel was a perfect way to group a collection of content for easy, quick access. We used it to display the maps of different floors and buildings.
3) The Proxy and Reader provided the framework for a basic conference Twitter stream. We used it to pull our twitter account plus the conference hash tag allowing attendees to follow along with the conversations taking place at the conference.
Advice for developers starting out with Sencha Touch
  • Play with the code. When we first started using Sencha Touch, we knew nothing about it (or any Sencha products). So, we just dove head-first into the documentation and examples. We spent the first few days looking over different examples and deciding what we needed for our application. Since all of the components are based on HTML5, CSS3, and JavaScript, it was easy to run locally and play with the code to see what it could do.
  • Use the Sencha Forum. After we got our initial application running, there were times when we ran into more application specific bugs that we needed to resolve. There’s a wide variety of people in the forums including beginners who are just starting out and seasoned Sencha developers. They were all willing to lend a hand by providing suggestions and examples. We appreciated having this additional help.
  • Don’t give up. We are still just touching the surface of what can be built with mobile web applications. Just because there isn’t an example or forum post of doesn’t mean it can’t be done. All of the code is there for you to explore and build upon. In a few cases, the best solution we found was to dig down into the Sencha Touch code to figure out how something was working. That led us to the best result.
Final Thoughts
Working with Sencha Touch has been a very rewarding experience. We received great comments from our attendees and look forward to building an even richer application next year.
The developers at Sencha have done a remarkable job laying the groundwork for web developers to create great mobile applications. The Echo Conference Mobile app was basically a test to see what we could build, and with Sencha Touch we developed an app that exceeded our expectations. We were able to build a production ready app in a short time. Plus, we learned a lot in the process.
Connect with Sencha:  Twitter  ·  Facebook  ·  Tumblr  ·  LinkedIn  ·  Official Company Blog