Lazy Loading Components with ComponentLoader

Lazy Loading Components with ComponentLoader - Menu

The Ext.ComponentLoader is perhaps one of the least discussed and lesser known features that ExtJS provides. Maybe that’s because only a few know that it can simplify how you build applications. Before showing that in an example, first I’ll briefly introduce the Ext.ComponentLoader class.
This class is available in ExtJS 4.0.0 and is used to load any content via Ext.Ajax into a Ext.Component. At the Component level, there’s a config Ext.Component.loader which accepts a configuration object or an instance of a Ext.ComponentLoader to load any remote content for the Component.

Ext.create('Ext.Component', {
    loader: {
        url: 'content.html',
        autoLoad: true
    renderTo: Ext.getBody()

The main configs are the connection ones which are passed to Ext.Ajax and the renderer config. Through renderer, Component knows how to render the loaded content, which can be:

  • html: The response text will be added to the component as raw html, see Ext.Component#html
  • data: The JSON data received from the response is passed to the Ext.Component#update
  • component: The response is expected to be one or many Ext.Component configuration objects which are passed to Ext.container.Container#add
  • custom: Very much like a renderer function, this custom function is used to parse and process the response so that you can configure the Component as desired.

If html, data or component don’t fit your needs, the custom approach allows you to render pretty much anything. For example, one can build a lazy which will lazily load all of its menuitems from the server. That can be done with the Ext.Component.loader so when the user clicks on any first level menuitem of a Menu, based on the given parameters, the loader loads the menuitems from the server and then the given renderer builds your Menu.

ComponentLoader - Lazy Loading Components - menu

Ext.define('Ux.view.Menu', {
    extend: '',
    xtype: 'mymenu'
    minHeight: 100, // Give some space to see the load mask
    loader: {
        loadMask: {
            msg    : 'Loading...'
        url: '/api/load_tree',
        renderer: function(loader, response, active){
            var success = true;
            var target = loader.getTarget();
            var items = [];
            var data;
            var i,ln;

            try {
                data = Ext.decode(response.responseText).data;

                // Loop through the data and build the menuitems configs
                for (i = 0, ln = data.length; i < ln; i++) {

            } catch (e) {
                success = false;

            // Insert the menuitems in the Menu
            if (success) {
                if (active.removeAll) {
            //Return true if ok, to call the callback and fire 'load' event
            return success;

The lazy loading can be done through the Ext.Config and Ext.mixin.Bindable mixin. The Ajax parameters are exposed as an evented Ext.Config config so they can be bound through the Bindable mixin at the Menu level:

  menu: {
      xtype: 'mymenu',
      bind: {
          extraParams: '{myData.myMenuParams}'

Then we have a listener at the config level, so whenever the extraParams changes, the menu loads the remote data and builds itself.

    listeners: {
        extraparamschange: function (menu, value) {
            // If the menu is visible load the subitems,
            // if not load them at first menu show.
            if (menu.isVisible()) {
            } else {
                menu.on('beforeshow', menu.loadMenuItems, menu, {
                    single: true

    // Here you can pre-process your params before applying 
    // them on the Loader
    applyExtraParams: function (myMenuParams) {
        if (Ext.isArray(myMenuParams)){
            return {
                myMenuParams: myMenuParams[0]

    loadMenuItems: function () {
            params: this.getExtraParams()

Lastly, in case you have to load the tooltips remotely, you can do it in the menu afterRender:

 getMenuItemConfig: function (rec) {
  return {
      text: rec.get('title'),
      afterRender: function () {
              url: '/api/mylazymenu/tooltip/?p=' + rec.get('aParam'),
              success: function (response) {
                  if (response.status = 200) {

You can find the Fiddle here


You could use Ext.Ajax to load your menu items but with the Ext.ComponentLoader you can do it in an easier, simpler and cleaner way. This, by default, provides you some renderers that you can use to build your Components content.

This website uses cookies

These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Please consent to the use of cookies before continuing to browse our site.

Like What You See?

Got any questions?