Results 1 to 5 of 5

Thread: Executive Dashboard example and lazy loading

  1. #1
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    260
    Answers
    6

    Default Executive Dashboard example and lazy loading

    In ExtJS 4 we were able to defer loading/adding tabs to Ext.tab.Panel using for example this code:
    Code:
    /**
     * This plugin defers the execution cost of the instantiation and initialization of child components of unrendered items.
     *
     * For example, in a {@link Ext.tab.Panel#deferredRender deferredRender} {Ext.tab.Panel TabPanel}, the unrendered tabs
     * do not have to incur the cost of instantiating and initializing their descendant components until render.
     *
     * This plugin allows that.
     *
     * Add the items to the plugin:
     *
     *    {
     *        xtype: 'tabpanel',
     *        items: [{
     *            title: 'Tab One',
     *            plugins: {
     *                ptype: 'lazyitems',
     *                items: [... tab's child items...]
     *            }
     *        }, {
     *            title: 'Tab One',
     *            plugins: {
     *                ptype: 'lazyitems',
     *                items: [... tab's child items...]
     *            }
     *        }]
     *    }
     *
     */
    Ext.define('Ext.LazyItems', {
        extend: 'Ext.AbstractPlugin',
     
         alias: 'plugin.lazyitems',
     
        init: function(comp) {
            this.callParent(arguments);
     
            if (this.items) {
                // Eager instantiation means create the child items now
                if (this.eagerInstantiation) {
                    this.items = comp.prepareItems(this.items);
                }
            }
     
            // We need to jump in right before the beforeRender call
            comp.beforeRender = Ext.Function.createInterceptor(comp.beforeRender, this.beforeComponentRender, this);
        },
     
        // Add the child items at the last possible moment.
        beforeComponentRender: function() {
            this.cmp.add(this.items);
     
            // Remove the interceptor
            delete this.cmp.beforeComponentRender;
        } 
    });
    Source: https://gist.github.com/ExtAnimal/c93148f5194f2a232464

    I
    'm wondering can we do same in ExtJS 5.1?
    I would like my stores to load (only once) when I select specific tab, not on startup.

    How should I modify Executive Dashboard to get this behaviour?

  2. #2
    Sencha Premium User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    807
    Answers
    23

    Default

    By looking at code should work for 5.1 also
    Github https://github.com/vadimpopa
    Blogging @ : http://vadimpopa.com
    Twitter: @vadimvpopa

  3. #3
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    260
    Answers
    6

    Default

    Quote Originally Posted by vadimv View Post
    By looking at code should work for 5.1 also
    Thanks for fast code review
    I'll try that.
    I was wondering if there is something buildin in ExtJS5 (5.1)
    Many times I've tried creating something from scratch to only find out after some times that it can be done by changing false to true in config.

  4. #4
    Sencha Premium User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    807
    Answers
    23

    Default

    Tab panels by default have only http://docs.sencha.com/extjs/5.1/5.1...deferredRender. I've not seen anything for lazy instantiation
    Github https://github.com/vadimpopa
    Blogging @ : http://vadimpopa.com
    Twitter: @vadimvpopa

  5. #5
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    260
    Answers
    6

    Default

    It is true by default.
    Problem is I can't disable loading stores on Dashboard start.
    I have my stores configured to autoLoad: true but I imagined they will load only when they are needed.

    In Executive Dashboard example I have changed last store (News) to load data from rest proxy, but when I open that example in browser on default page I can see that News data is loaded even when I'm on different tab.

    Most of time I won't be selecting that tab, so I think loading of News data should happen when I select that tab.

    Any advices how to change this?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •