Is there a simple way of including external HTML files and rendering them on an Ext.Panel in Sencha touch 2.3? Ideally I would like to create a wrapper module for an HTML file that can then be instantiated using xtype. An external javascript file should be included for handling the events on the external HTML file.
Update:
The files below allow keypad.html to be rendered onto the Ext.Panel in main.js.
What I would like to know is how to include the file script1.js properly so that it performs the event handling. I have tried two things:
- Including script1.js in keypad.html. Result: it doesn't load.
- Including script1.js in app/index.html. Result: it loads. However it the javascript should be loaded after keypad.html is loaded because of the way the event handlers are set up. I have tried adding body onload="myFunction()" to keypad.html and then initialising the event handlers inside this function but this doesn't work.
Furthermore, what is a simple way of returning the answer in btnOk.onclick() to app/main.js.
app/view/main.js
Ext.define('TestApp.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
config: {
html: loadURL('resources/keypad.html'),
}
});
The loadURL function is in app/globals.js. globals.js is included in 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*/
}
};
