Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

This is part of the Ext JS to React blog series. You can review the code from this article on the Ext JS to React Git repo.

One of the lesser talked about classes within Ext JS is its templating class. Ext JS’s Template and XTemplate classes take a string (or an array of strings) and compile it down to a JavaScript function. When it’s told to render, the JavaScript will execute with data passed to it and outputs HTML. It’s one of the few aspects of Ext JS where you will deal with HTML directly.

In React, instead of defining a template and passing data to output HTML, you’ll use JSX and native HTML/CSS/JavaScript. This sounds a bit scary and may even come across as a step backward after having worked with the templating system in Ext JS. But in reality, it’s just skipping the runtime compilation step Ext JS had to go through (using Babel will transpile JSX into JavaScript at build time). JSX allows you to take full benefit of the conventions ushered in with ES6 such as string template literals. Additionally, Javascript expressions can be included with ease including conditional processing. But, perhaps we’re getting ahead of ourselves. Let’s take this one step at a time!

Ext JS templating example

Most Ext JS components can accept a tpl config and when passed data, will render the HTML for you. Templates can be a mix of primitive values (strings, numbers, booleans) or can handle more complex values (arrays, objects). An example of using these values would look like:

vvar data = {
    name    : 'Smith Corp',
    address : {
        street : '1 Smith Blvd',
        city   : 'Smithville',
        state  : 'Smith',
        zip    : 12345
    },
    people  : [{
        name   : 'Bob Smith',
        email  : 'bob@smith.com',
        skills : ['cooking', 'building']
    }, {
        name   : 'Jane Smith',
        email  : 'jane@smith.com',
        skills : ['managing', 'presenting']
    }]
};

Ext.define('MyComponent', {
    extend: 'Ext.Component',
    xtype: 'mycomponent',
    
    tpl: '<h1>{name}</h1>' +
    '<div>' +
        '<h2>Address:</h2>' +
        '<div>{address.street}</div>' +
        '<div>{address.city}, {address.state} {address.zip}</div>' +
    '</div>' +
    '<tpl if="people.length &gt; 0">' +
        '<div>' +
            '<h2>People ({people.length}):</h2>' +
            '<ul>' +
                '<tpl for="people">' +
                    '<li>' +
                        '<div>{name}</div>' +
                        '<div>{email}</div>' +
                        '<div>Skills:</div>' +
                        '<ul>' +
                            '<tpl for="skills">' +
                                '<li>{.}</li>' +
                            '</tpl>' +
                        '</ul>' +
                    '</li>' +
                '</tpl>' +
            '</ul>' +
        '</div>' +
    '<tpl else>' +
        '<div>No people found</div>' +
    '</tpl>'
});

Ext JS templating rundown

This component will show a company’s name and address after looping through an array of people belonging to the component. There are a couple of distinctions to note:

  1. The values wrapped in curly braces are mapped to the current object/array. So {name} is mapped to data.name and {address.street} is mapped to data.address.street.
  2. Most of the tags are normal HTML tags. The only special tag is the <tpl> tag. It is not a HTML tag but is handled specially by Ext JS. This tag can handle special things like if conditionals (<tpl if=”people.length &gt; 1”> and <tpl else> where if is checking for data.people in this case), loop through an array (<tpl for=”people”> which will loop through the data.people array) among other things.
  3. Notice within the <tpl if=”people.length &gt; 1”> ,the > had to be encoded.
  4. When looping through an array, the values within the curly braces are for the current item in it. This is why {name} within the people loop will belong to the object within the people array and not the top level name of the company. Likewise, if the item within the array is a primitive value you would use a period within the curly braces. This will use the current item similar to the skills loop.

The template string above is compiled to JavaScript the first time it’s executed. It will replace the curly braces with the associated data, and use an if conditional for the <tpl if=””> without needing to encode the greater-than. Then, it will run a for loop for the <tpl for=””>. With React, the component will handle all of the JavaScript code instead of relying on a compile step being abstracted away.

React templating example

Now, we will show how a React component would output the same HTML as above in the Ext JS example:

import React, { Component } from 'react';

class Company extends Component {
  render () {
    const { data } = this.props;

    return (
      <div>
        <h1>{data.name}</h1>
        <div>
          <h2>Address:</h2>
          <div>{data.address.street}</div>
          <div>{data.address.city}, {data.address.state} {data.address.zip}</div>
        </div>
        <div>
          {
            data.people.length > 0 ?
              <div>
                <h2>People ({data.people.length}):</h2>
                <ul>
                  {
                    data.people.map(person => (
                      <li>
                        <div>{person.name}</div>
                        <div>{person.email}</div>
                        <div>Skills</div>
                        <ul>
                          {
                            person.skills.map(skill => <li>{skill}</li>)
                          }
                        </ul>
                      </li>
                    ))
                  }
                </ul>
              </div> :
              <div>No people found</div>
          }
        </div>
      </div>
    );
  }
}

export default Company;

To use the Company class (with the same data we set up for the Ext JS example above):

import React, { Component } from 'react';
import Company from './Company'
import './App.css';

// the data object from the Ext JS example above

class App extends Component {
  render() {
    return (
      <Company data={data}/>
    );
  }
}

export default App;
Ext JS to React: Simple Templating, Example

With the exception of the native JavaScript ternary and array maps, the React version is very close to what you would do in Ext JS. JSX uses curly braces to allow you to return a value from the data object but also allows you to execute a JavaScript statement within it. Not having a templating system isn’t a scary thing as JSX is really close to a templating system itself. Your IDE may even decorate your code with syntax highlighting including the JavaScript within the curly braces as well as report errors by line number. Your editor’s auto indenting and code formatting tools, such as eslint, will unindent your nice XTemplate! For example, the IDE is not going to know to indent <tpl for="">. In this way, the dev experience is much improved with JSX.

Conclusion

Ext JS templating has proven to be a very flexible and powerful system, but JSX is just as powerful, more flexible, and well supported by the various tooling for JavaScript. With React, you are likely already familiar with the mechanics of JSX. This means no bespoke templating system is needed AND you don’t lose any functionality! Reliance on facilities of XTemplate like xindex and xcount to monitor iterations is no longer needed. It can all be done with plain, familiar JavaScript. Another big plus with React templating is that compositing JSX output from one React class into another is very straight forward. Stay tuned for our next blog post where we take a deeper dive into what’s possible with JSX and React!

Posted in Application Development
Share this

Seth Lemmons

Seth Lemmons is a Senior Front End Engineer at Modus Create. Seth has devoted several years to learning Ext JS. He has spent the last 10 years building and supporting web applications with an eye for excellent user experience. Outside of work and a young family Seth has very little free time to just do what he wants. But, if he did have some extra time he'd kinda be into learning vector illustration. And someday he hopes to play video games again.
Follow

Related Posts

  • React Landing
    Ext JS to React: Migration to Open Source

    Worried about Migrating from Ext JS? Modus has the Answers Idera’s acquisition of Sencha has…

  • Ext JS to React: FAQ
    Ext JS to React: FAQ

    This is part of the Ext JS to React blog series. React is Facebook's breakout…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
IT modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Our story
    • Careers Old
  • Let’s talk
  • EN
  • FR