My Top 3 Ext JS Modern Components

I’ve been working with Sencha’s Ext JS framework for over 18 months now and I’ve been consistently impressed with how flexible and extendable the framework is. In that time I’ve developed a range of mobile applications, from critical process driven field applications to consumer conference applications, with the “modern” toolkit.

Ext JS modern gives you the flexibility, themes, features and reliability to create rich applications for your target audience.

Range of Components

One of the first things that will stand out when you work your way through the revamped Ext JS 6 documentation is the range of customisable components available. With that in mind, here are my top three most useful modern toolkit components.

1. Ext.dataview.List

One of my favourite components is the Dataview List (xtype: ‘list’). Business and consumer applications alike often have lots of data of the same type that needs to be formatted in a list consistently, with flexible styling and often with a data driven interface that’s reactive to user input. Enter the XTemplate:

Ext.application({
    name : 'SwarmXTemplateExample1',

    launch : function() {
        Ext.create('Ext.dataview.List', {
            fullscreen: true,
            data: [
                { isDog: true, name: 'spot' },
                { isDog: false, name: 'jasper' },
                { isDog: true, name: 'gram' },
                { isDog: false, name: 'alex' },
                { isDog: false, name: 'snowball' }
            ],
            itemTpl: Ext.create('Ext.XTemplate',
                '<tpl if="values.isDog">' +
                    // Must be a dog
                    '<div style="font-weight: bold;">My name is {name} and I go Woof!</div>' +
                '<tpl else>' +
                    // Nope, it's a cat!
            		'<div style="font-style: italic;">My name is {name} and I go Meow.</div>' +               
            '</tpl>'
            )
        });
    }
});

View this example in Sencha Fiddle.

The XTemplate takes a data or store config (using a reference to an Ext JS store or even just an array) and iterates through each record looking for keywords (such as “name”) that match those in the HTML structure. These are marked with curly brackets on either side: {name}. For each record in the store, a list item is added to the view which contains your HTML code.

We can add data driven logic in too. In the above fiddle example you can see we run a simple check to see if the particular object is a Dog or not using <tpl if=""> and <tpl else>. If the object has a keyvalue “isDog” that returns as true, then we run one part of the XTemplate (the Dog bit), otherwise we run the other part of the XTemplate (the Cat bit).

We can be take this further and run a function within each iteration of the XTemplate:

Ext.application({
    name : 'SwarmXTemplateExample2',

    launch : function() {
        Ext.create('Ext.dataview.List', {
            fullscreen: true,
            data: [
                { isDog: true, name: 'spot' },
                { isDog: false, name: 'jasper' },
                { isDog: true, name: 'gram' },
                { isDog: false, name: 'alex' },
                { isDog: false, name: 'snowball' }
            ],
            itemTpl: Ext.create('Ext.XTemplate',
                '<tpl if="values.isDog">' +
                    // Must be a dog
                    '<div style="font-weight: bold;">My name is {[this.doNameCasing(values.name)]} and I go Woof!</div>' +
                '<tpl else>' +
                    // Nope, it's a cat!
            		'<div style="font-style: italic;">My name is {[this.doNameCasing(values.name)]} and I go Meow.</div>' +               
            	'</tpl>',
                {
                    doNameCasing: function (name) {
                        // Return the first character uppercase and the remaining characters unchanged
                        return name.charAt(0).toUpperCase() + name.substr(1).toLowerCase();
                    }
                }
            )
        })
    }
});

View this example in Sencha Fiddle.

Now we can call a function within our XTemplate and pass in a keyword from the data object as a parameter. In this example we are passing in the objects keyvalue "name" into a function, doNameCasing(), that returns that keyvalue with the first character set as uppercase. So ‘spot’ becomes ‘Spot’.

Using these data driven templates we can create rich lists to handle and visualise lots of data with ease.

2. Ext.navigation.View

You need to be able to navigate around your mobile app easily, remembering what the last view you navigated from was and adding in a back button where appropriate. Managing this yourself can be a nightmare, fortunately Ext JS can do it for you with the Navigation View, xtype: 'navigationview' – a powerful method of navigating between the views in your mobile application. The Navigation View is your main container which essentially holds a ‘stack’ of views. The title or navigation bar (which generally contains the app or view title and menu/action buttons) stays the same so that it is consistent throughout your application. You can manage the stack by calling push() or pop() on the main view. When you push a view onto the main navigation view the back button will automatically appear and tapping it will call pop().

Ext.application({
    name : 'SwarmNavViewExample',
    
    launch : function() {
        Ext.create('Ext.NavigationView', {
            fullscreen: true,
            controller: 'mainviewcontroller',
      itemId: 'navigationView',
            items: [
                {
                	title: 'Main View',
                	items: [
                        {
                    		xtype: 'button',
                    		text: 'Go to view two',
                            listeners: {
                                tap: 'openView'
                            }
                		}
                	]
            	}
          	]
        });
    }
});

Ext.define('MainViewController', {
    extend : 'Ext.app.ViewController',
    alias: 'controller.mainviewcontroller',
    
    openView: function () {
        var navigationView = this.getView();
        navigationView.push(
            {
            	title: 'Second View',
                html: '</br>This is the second view - calling .pop() would take you to the previous view'
            }
        );
    }
});

View this example in Sencha Fiddle.

You can nest views as far as you like and, with a bit of context checking cleverness, even manage the title and available buttons on the top navigation bar for each active view.

Sometimes you might want to layer a view on top of your view port and not put it in the navigation stack. No problem. Just create a panel with the configuration below. You can remove it easily to with Ext.Viewport.remove(myPanelName); when you no longer need the view.

Ext.application({
    name : 'SwarmPanelExample',
    
    launch : function() {
        Ext.create('Ext.NavigationView', {
            fullscreen: true,
            items: [
                {
                	title: 'Main View',
                	items: [
                        {
                    		xtype: 'button',
                    		text: 'Go to panel view',
                            listeners: {
                                tap: function () {
                                    panel = Ext.create('MyApp.view.my.panel.Name');
                                    panel.setHeight(Ext.Viewport.getWindowHeight());
                  panel.setWidth(Ext.Viewport.getWindowWidth());
                                    Ext.Viewport.add(panel);
                                }
                            }
                		}
                	]
            	}
          	]
        });
    }
});

Ext.define('MyApp.view.my.panel.Name', {
  extend: 'Ext.Panel',
  xtype: 'view-myviewname',
  hidden: false,
  centered: true,
  showAnimation: 'slideIn',
  hideAnimation: 'slideOut',
  items: [
    {
      xtype: 'titlebar',
      docked: 'top',
      title: 'MY PANEL NAME',
      items: [
        {
          iconCls: 'fa fa-times',
          align: 'left',
          listeners: {
            tap: function () {
                           	Ext.Viewport.remove(this.up('view-myviewname'));
                        }
          }

        }
      ]
    },
    {
      html: 'I am a component.'
    }
  ]
});

View this example in Sencha Fiddle.

3. Ext.Menu

Last, but not least, are Menus in Ext JS modern (‘xtype: menu’). Menus are an excellent out-of-the-box component in the modern toolkit that allow you to easily create a pop out menu that is as customisable as you like. Rather than creating a panel on top of your viewport and then fiddling around with the animation configuration to make it slide in, Ext JS does this for you:

Ext.application({
    name : 'SwarmMenuExample',
    
    launch : function() {
        Ext.create('Ext.NavigationView', {
            fullscreen: true,
            items: [
                {
                	title: 'Main View',
                	items: [
                        {
                    		xtype: 'button',
                    		text: 'Open the menu',
                            listeners: {
                                tap: function () {
                                    var menu = Ext.create('MyApp.view.my.menu.Name');
                                    Ext.Viewport.setMenu(menu, {
                                        side: 'top'
                                    });
                                    Ext.Viewport.showMenu('top');
                                }
                            }
                		}
                	]
            	}
          	]
        });
    }
});

Ext.define('MyApp.view.my.menu.Name', {
    extend: 'Ext.Menu',
    xtype: 'view-mymenuname',
    cls: 'MyMenu',
    height: '40%',
   	
  items: [
    {
      xtype: 'container',
      height: '100%',
      layout: {
        type: 'vbox',
        pack: 'center'
      },
      items: [
        {
          xtype: 'container',
          layout: {
            type: 'hbox',
            align: 'middle',
            pack: 'center'
          },
          items: [
            {
              xtype: 'button',
              text: 'BUTTON 1',
              labelCls: 'button-label',
              iconCls: 'button-icon',
              listeners: {
                tap: function () {
                                    // Do something...
                                }
              }
            },
            {
              xtype: 'button',
              text: 'BUTTON 2',
              labelCls: 'button-label',
              iconCls: 'button-icon',
              listeners: {
                tap: function () {
                                    // Do something else!
                                }
              }
            }
          ]
        }
      ]
    }

  ]
});

View this example in Sencha Fiddle.

We give the menu a position config, such as ‘top’ or ‘bottom’ which will make the menu pop out from that area of the screen when initiated. Menus will, by default, have masked background behind them to differentiate them from the main view behind. Using this configuration, we can add multiple menus which can be called from different areas of the screen e.g. a main menu from the ‘top’ and a side/sub-menu from the ‘right’.

This is just a small subset of the powerful components available in Sencha’s Ext JS Modern toolkit. As for the rest of them? Just check out the Ext JS docs!

Get in touch for help with Sencha’s ExtJS framework or for more information about Swarm’s services.

GET IN TOUCH NOW