Ext JS to React: Advanced Templating

  • Previously, we looked at simple template examples with Ext JS and React.
  • This includes the use of member functions and inline value formatters from Ext JS and how the same techniques are accomplished with React.
  • The equivalent changes in React would be: – – To use the Members class (with the same data we set up for the Ext JS example above): – – In JSX, anything between curly braces can be JavaScript.
  • The method is akin to using “template member functions” in Ext JS’s XTemplates.
  • Although this isn’t required (it’s preferred to keep inline for such a simple check), it still serves as a good example of calling class methods within JSX.

Previously, we looked at simple template examples with Ext JS and React. In this blog, we’d like to look at some more advanced examples. This includes the use of member functions and inline value formatters from Ext JS and how the same techniques are accomplished with React. For consistency, we’ll use the same data set defined in the Simple Templating post.

Previously, we looked at simple template examples with Ext JS and React. In this blog, we’d like to look at some more advanced examples. This includes the use of member functions and inline value formatters from Ext JS and how the same techniques are accomplished with React. For consistency, we’ll use the same data set defined in the Simple Templating post.

In the last post, we saw how to get started with templates in both the Ext JS and React worlds. In the Ext JS example, we needed to encode the greater-than symbol to describe a comparator and that is ugly.

‘ +

For this first example, let’s say we want to format the number showing how many people belong to the company. The formatter will include a comma as necessary; let’s return the email value as a clickable link. The updated component would be:

Ext.define(‘MyComponent’, { extend: ‘Ext.Component’, xtype: ‘mycomponent’, tpl: [ ‘

{name}

‘ + ‘

‘ + ‘

Address:

‘ + ‘

{address.street}

‘ + ‘

{address.city}, {address.state} {address.zip}

‘ + ‘

‘ + ‘‘ + ‘

‘ + ‘

People ({people.length:number(“0,0”)}):

‘ + ‘

    ‘ + ‘‘ + ‘

  • ‘ + ‘
    {name}

    ‘ + ‘

    {[this.linkifyEmail(values.email)]}

    ‘ + ‘

    Skills:

    ‘ + ‘

      ‘ + ‘‘ + ‘

    • {.}
    • ‘ + ‘‘ + ‘

    ‘ + ‘

  • ‘ + ‘‘ + ‘

‘ + ‘

‘ + ‘‘ + ‘

No people found

‘ + ‘‘, { hasPeople : function (arr) { return arr.length > 0; }, linkifyEmail : function (email) { return ‘‘…

Ext JS to React: Advanced Templating