Question

是否有一种简单的方法可以包含外部HTML文件并在Sencha touch 2.3的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的简单方法是什么。

应用程序/视图/ 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;
};

应用程序/资源/ 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>

应用程序/资源/ 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*/
    }

};

Answer 1

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

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中向Ext.Panel添加HTML和javascript文件的最佳方法

1 个答案: