Commit 05ee04f1 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Faster initial loading of inline examples. 

The actual previews are now only loaded after the preview button is
clicked.

The loading time of Ext.button.Button on my local machine dropped from
~4.4 seconds to 1.8 seconds.  That's about twice as fast, although
overall it's still a bit slow.
parent f3e466af

template/app/controller/Examples.js

+4 −5
Original line number Diff line number Diff line
@@ -33,21 +33,20 @@ Ext.define('Docs.controller.Examples', { 
                }

            },

            'inlineexample [cmpName=preview]': {

                show: function(card) {

                    this.refreshPreview(card.ownerCt);

                },

                activate: function(cmp) {

                    this.activateTab(cmp, 'preview');

                }

            },

            'inlineexample toolbar button[iconCls=code]': {

                click: function(cmp) {

                    cmp.up('inlineexample').layout.setActiveItem(0);

                    cmp.up('inlineexample').showCode();

                }

            },

            'inlineexample toolbar button[iconCls=preview]': {

                click: function(cmp) {

                    cmp.up('inlineexample').layout.setActiveItem(1);

                    cmp.up('inlineexample').showPreview(function() {

                        this.refreshPreview(cmp.up('inlineexample'));

                    }, this);

                }

            },

            'inlineexample toolbar button[iconCls=copy]': {

template/app/view/examples/Inline.js

+41 −13
Original line number Diff line number Diff line
@@ -50,21 +50,49 @@ Ext.define('Docs.view.examples.Inline', { 
    },



    initComponent: function() {

        this.items = [{

        this.items = [

            {

                cmpName: 'code',

                style: 'border: 0',

                bodyPadding: 2,

                bodyStyle: 'background: #f7f7f7',

                autoScroll: true

        }];

            }

        ];



        this.callParent(arguments);

    },



        this.items.push({

    /**

     * Activates the code card.

     */

    showCode: function() {

        this.layout.setActiveItem(0);

    },



    /**

     * Activates the code preview card.

     * When called for the first time, creates the preview iframe.

     * @param {Function} callback  Called when iframe is ready.

     * @param {Object} scope

     */

    showPreview: function(callback, scope) {

        if (!this.previewInitialized) {

            this.add({

                bodyPadding: 10,

                cmpName: 'preview',

            html: '<iframe id="' + this.getIframeId() + '" src="egIframe.html" style="width: 100%; height: 100%; border: 0"></iframe>'

                html: '<iframe id="' + this.getIframeId() + '" style="width: 100%; height: 100%; border: 0"></iframe>'

            });



        this.callParent(arguments);

            var iframe = document.getElementById(this.getIframeId());

            iframe.onload = Ext.Function.bind(callback, scope);

            iframe.src = "egIframe.html";

            this.layout.setActiveItem(1);

            this.previewInitialized = true;

        }

        else {

            this.layout.setActiveItem(1);

            callback.call(scope);

        }

    },



    /**