Commit 2749c147 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Make inline examples work in Sencha Touch. 

- There are now two iframe files: extIframe.html and touchIframe.html.
- Touch iframe is wrapped inside div which renders iPhone border.
- The height of touch examples is fixed so that the phone image would
  fit.
parent 9444cbbb

template/app/view/examples/Inline.js

+19 −3
Original line number Diff line number Diff line
@@ -83,7 +83,7 @@ Ext.define('Docs.view.examples.Inline', { 
            this.add({

                bodyPadding: '0 10',

                cmpName: 'preview',

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

                html: this.getHtml()

            });

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

            // Something is not quite ready when onload fires.
@@ -92,7 +92,7 @@ Ext.define('Docs.view.examples.Inline', { 
            iframe.onload = function() {

                Ext.Function.defer(callback, 100, scope);

            };

            iframe.src = "egIframe.html";

            iframe.src = Docs.touchExamplesUi ? "touchIframe.html" : "extIframe.html";

            this.layout.setActiveItem(1);

            this.previewInitialized = true;

        }
@@ -102,6 +102,22 @@ Ext.define('Docs.view.examples.Inline', { 
        }

    },



    getHtml: function() {

        if (Docs.touchExamplesUi) {

            var tpl = new Ext.XTemplate(

                '<div class="touchExample phone landscape">',

                    '<iframe id="{id}" style="width: 480px; height: 320px; border: 0;"></iframe>',

                '</div>'

            );

        }

        else {

            var tpl = new Ext.XTemplate(

                '<iframe id="{id}" style="width: 100%; height: 100%; border: 0"></iframe>'

            );

        }

        return tpl.apply({id: this.getIframeId()});

    },



    /**

     * Returns iframe ID for this inline example component.

     * @return {String}
@@ -120,7 +136,7 @@ Ext.define('Docs.view.examples.Inline', { 
    updateHeight: function() {

        var el = this.el.down('.CodeMirror-lines');

        if (el) {

            this.setHeight(el.getHeight() + 5);

            this.setHeight(Docs.touchExamplesUi ? 320+50 : el.getHeight() + 5);

        }

    }

template/egIframe.html→template/extIframe.html

+2 −0
Original line number Diff line number Diff line
@@ -3,8 +3,10 @@ 
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Sencha Examples</title>



    <script type="text/javascript" src="extjs/ext-all.js"></script>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">



    <style id="iframeCSS" type="text/css"></style>

    <script type="text/javascript">

        var refreshPage = function(code, css) {

template/touchIframe.html

0 → 100644
+26 −0
Original line number Diff line number Diff line 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Sencha Examples</title>



    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>

    <link rel="stylesheet" type="text/css" href="touch/resources/css/sencha-touch.css">



    <style id="iframeCSS" type="text/css"></style>

    <script type="text/javascript">

        var refreshPage = function(code, css) {

            try {

                document.body.innerHTML = '';

                eval(code);

                Ext.get('iframeCSS').update(css);

            } catch (e) {

                alert(e);

                document.body.innerHTML = e;

            }

        }

    </script>

</head>

<body>

</body>

</html>