在 Sencha touch 中将 HTML 和 javascript 文件添加到 Ext.Panel 的最佳方法

Posted

技术标签:

【中文标题】在 Sencha touch 中将 HTML 和 javascript 文件添加到 Ext.Panel 的最佳方法【英文标题】:Best method of adding an HTML and javascript file to Ext.Panel in Sencha touch 【发布时间】:2014-03-17 20:33:39 【问题描述】:

在 Sencha touch 2.3 中是否有一种简单的方法可以包含外部 html 文件并在 Ext.Panel 上呈现它们?理想情况下,我想为 HTML 文件创建一个包装器模块,然后可以使用 xtype 对其进行实例化。应该包含一个外部 javascript 文件来处理外部 HTML 文件上的事件。

更新:

下面的文件允许将 keypad.html 渲染到 main.js 中的 Ext.Panel。

我想知道的是如何正确地包含文件 script1.js 以便它执行事件处理。我尝试了两件事:

    在 keypad.html 中包含 script1.js。结果:它没有加载。 在 app/index.html 中包含 script1.js。结果:它加载。但是,由于事件处理程序的设置方式,应该在加载 keypad.html 之后加载 javascript。我尝试将 body onload="myFunction()" 添加到 keypad.html,然后在此函数中初始化事件处理程序,但这不起作用。

此外,将 btnOk.onclick() 中的答案返回给 app/main.js 的简单方法是什么。

app/view/main.js

Ext.define('TestApp.view.Main', 
    extend: 'Ext.Panel',
    xtype: 'main',

    config: 
        html: loadURL('resources/keypad.html'),
    
);

loadURL 函数在 app/globals.js 中。 globals.js 包含在 app/index.html 中

function loadURL(url) 
    var oRequest = new XMLHttpRequest();
    oRequest.open('GET', url, false);
    oRequest.setRequestHeader("User-Agent", navigator.userAgent);
    oRequest.send(null)

    return oRequest.responseText;
;

app/resources/keypad.html

<!DOCTYPE html>
<html>
    <head>
        <script src="script1.js"></script>
    </head>
    <body>

    <div id="calculator">

    <div id="display">0</div>

    <div id="numbers">
        <div id="row1">
            <a class='r1'>1</a>
            <a class='r1'>2</a>
            <a class='r1'>3</a>
        </div>
        <div id="row2">
            <a class='r2'>4</a>
            <a class='r2'>5</a>
            <a class='r2'>6</a>
        </div>
        <div id="row3">
            <a class='r3'>7</a>
            <a class='r3'>8</a>
            <a class='r3'>9</a>
        </div>
        <div id = "row4">
            <button type="button" id="buttonCancel">Cancel</button>
            <a class='row4'>0</a>
            <button type="button" id="buttonOk">OK</button>
        </div>
    </div>

    </div>
    </body>
</html>

app/resources/script1.js

window.onload = function () 

    var display = document.getElementById("display");
    var digitIndex = 0; 
    var displayTxt = "0"; 
    var numbers = document.getElementById('numbers');

    /*Called after a number has been clicked*/
    var updateNumber = function(number) 
        if (digitIndex == 0) 
            display.innerHTML = number;
            digitIndex++;
        
        else if (digitIndex < 10)  
            display.innerHTML += number;
            digitIndex++;
        
    

    /*Event handler*/
    var numberClickHandler = function(e) 
        var number = e.target.innerHTML; 
        if (e.target.id == 'buttonCancel' || e.target.id == 'buttonOk')
          return false;

        updateNumber(number);
    

    if (numbers.addEventListener) 
      numbers.addEventListener('click', numberClickHandler, false); 
    
    else if (numbers.attachEvent)  
      numbers.attachEvent('onclick', numberClickHandler);
    

    var btnCancel = document.getElementById("buttonCancel");
    btnCancel.onclick = function(event)
        display.innerHTML = "0";
        digitIndex = 0;
    

    var btnOk = document.getElementById("buttonOk");
    btnOk.onclick = function(event)
        /*Return display.innerHTML to main.js*/
    

;

【问题讨论】:

您好,请您粘贴这个 html 文件 您可以在面板内使用 iframe。 【参考方案1】:

您可以在面板中使用 iframe 并将 iframe src 指向 html 文件的 url。

var url = '<div style="height:100%;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%" src="'+url+'"/></div>';




xtype: 'panel',
scrollable:true,
styleHtmlContent : true,                                
html:url    

【讨论】:

以上是关于在 Sencha touch 中将 HTML 和 javascript 文件添加到 Ext.Panel 的最佳方法的主要内容,如果未能解决你的问题,请参考以下文章

如何在sencha touch中将图像从商店动态绑定到轮播

在 Sencha Architect 中将 Ext.Menu 添加到视口

如何在sencha touch 2中将轮播正确添加到视图中?

Sencha touch - 滚动子也滚动父

Sencha Touch实战OA系统开发|Sencha Touch项目教程

sencha touch load store 手动