importing html files into Sencha Touch 2 - sencha-touch

Question

I'm trying to import an external html file into Touch 2 and encountering errors. My view code is as follows:
Ext.define("GS.view.Demo", {
extend: 'Ext.container.Container',
xtype: 'container',
requires: [
'Ext.Component',
'Ext.ItemCollection',
'Ext.Mask',
'Ext.behavior.Scrollable',
'Ext.layout.Layout',
],
config: {
title: 'Demo',
iconCls: 'star',
items: [{
flex: 1,
margins: '0 2 0 0',
title: 'Load raw html',
styleHtmlContent: true,
bodyPadding: 5,
loader: {
autoLoad: true,
url: 'SHdemo.html'
}
}]
}
});
and apps.js:
//<debug>
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
controllers: ["Main"],
name: 'GS',
requires: [
'Ext.MessageBox'
],
views: ['Main', 'Home', 'Contact', 'Blog', 'Demo'],
icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon#2x.png',
144: 'resources/icons/Icon~ipad#2x.png'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('GS.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});
this code throws "The following classes are not declared even if their files have been loaded: 'Ext.container.Container'" and if I replace 'Ext.container.Container' with 'Ext.Container' in my view, I get "Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.demo". What's the proper procedure for importing external html files?

Answer 1

There is no need for xtype:'container'.
You should add an alias to your container like
extend: 'Ext.Container',
alias:'widget.demo'
And adding it to the viewport could look like this
Ext.Viewport.add({xtype:'demo'});