Blog

Ext JS 4 Preview: Refactoring & Standardizing the Rendering Process

December 13, 2010 | 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}"/>',
   onRender: function() {
       Ext.applyIf(this.renderData, {
           blank: Ext.BLANK_IMAGE_URL,
           iconCls: this.iconCls
       });
       Ext.applyIf(this.renderSelectors, {
           iconEl: '.' + this.iconCls
       });
       IconComponent.superclass.onRender.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.