Commit 4ea059b5 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Avoid flickering of the page when switching examples. 

Clearing the page first and then loading the example.

Created separate examples.Container class.
parent 5ed30ff8

template/app/controller/Examples.js

+6 −2
Original line number Diff line number Diff line
@@ -18,6 +18,10 @@ Ext.define('Docs.controller.Examples', { 
        {

            ref: 'tree',

            selector: '#exampletree'

        },

        {

            ref: 'page',

            selector: '#example'

        }

    ],
@@ -54,9 +58,9 @@ Ext.define('Docs.controller.Examples', { 
        var example = this.getExample(url);

        this.getViewport().setPageTitle(example.text);

        if (this.activeUrl !== url) {

            this.getPage().clear();

            this.activateExampleCard();

            var ifr = document.getElementById("exampleIframe");

            ifr.contentWindow.location.replace('extjs/examples/' + example.url);

            this.getPage().load(example);

        }

        else {

            this.activateExampleCard();

template/app/view/Viewport.js

+4 −5
Original line number Diff line number Diff line
@@ -14,7 +14,8 @@ Ext.define('Docs.view.Viewport', { 
        'Docs.view.guides.Container',

        'Docs.view.videos.Index',

        'Docs.view.videos.Container',

        'Docs.view.examples.Index'

        'Docs.view.examples.Index',

        'Docs.view.examples.Container'

    ],



    id: 'viewport',
@@ -127,10 +128,8 @@ Ext.define('Docs.view.Viewport', { 
                                    id: 'exampleindex'

                                },

                                {

                                    id: 'example',

                                    xtype: 'container',

                                    layout: 'fit',

                                    html: '<iframe style="width: 100%; height: 100%; border: 0;" id="exampleIframe" src="egIframe.html"></iframe>'

                                    xtype: 'examplecontainer',

                                    id: 'example'

                                }

                            ]

                        }

template/app/view/examples/Container.js

0 → 100644
+29 −0
Original line number Diff line number Diff line 
/**

 * The example page.

 *

 * Renders the example inside iframe.

 */

Ext.define('Docs.view.examples.Container', {

    extend: 'Ext.container.Container',

    alias: 'widget.examplecontainer',

    layout: 'fit',



    /**

     * Loads example into the page.

     * @param {Object} example Example object

     */

    load: function(example) {

        this.tpl = this.tpl || new Ext.XTemplate(

            '<iframe style="width: 100%; height: 100%; border: 0;" src="extjs/examples/{url}"></iframe>'

        );



        this.update(this.tpl.apply(example));

    },



    /**

     * Clear the previously loaded example.

     */

    clear: function() {

        this.update('');

    }

});
 
 No newline at end of file