0

I have just started with sencha touch,really impressed with sencha documentation and its native feel. I was trying out this link. But i got error in between and i got this error in console "The following classes are not declared even if their files have been loaded: 'Ext.panel'. Please check the source code of their corresponding files for possible typos: 'touch/src/panel.js". i am new to MVC framework so i am not able to find where i went wrong. And is it necessary to get good knowledge of ExtJs before trying out Sencha Touch?

Here is my code App.js

Ext.Loader.setPath({
'Ext': 'touch/src'
});


Ext.application({
name: 'hello',

requires: [
'Ext.MessageBox'
],

views: [
'Main','Home'
],

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'
},

isIconPrecomposed: true,

startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},

launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();

// Initialize the main view
Ext.Viewport.add(Ext.create('hello.view.Main'));
},

onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload,
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});

Main.js

Ext.define('hello.view.Main', {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',

items: [
{
xtype:'homepanel'
}
]
}
});

Home.js

Ext.define('Hello.View.Home',{
extend:'Ext.panel',
xtype:'homepanel',
config:{
title:'Home',
iconCls:'home',

html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists, and forms to create a simple app</p>",
'<h2>Sencha Touch</h2>'
].join("")

}
});

index.html

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>hello</title>
<style type="text/css">

</style>
<!-- The line below must be kept intact for Sencha Command to build your application ->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js">     </script>
<script type="text/javascript" src="app/view/Home.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
SsNewbie
  • 257
  • 2
  • 8
  • 21
  • I have updated my code. Thanks for your reply, You mean sencha documentation is enough? Could you please post any good tutorial link to get Ext class system or ExtJs, so that i can get a clear cut of sencha touch. Thanks again! – SsNewbie Aug 27 '13 at 11:50

1 Answers1

1

Exactly as the error says. The class name is Ext.Panel, not Ext.panel.

Evan Trimboli
  • 29,900
  • 6
  • 45
  • 66
  • Oops! How can i be so Dumb?! Thanks a lot Evan. Could you please post any good tutorial link to get Ext class system or ExtJs, so that i can get a clear cut of sencha touch, as i said i am familiar with Html5 and jquery. So i am finding difficult to catch sencha touch. Thanks again. – SsNewbie Aug 27 '13 at 12:29