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
Loading
Loading
Loading
Loading
+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);
        }
    }

+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) {
+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>