Databases
StackOverflow2013
Postsdbo
POSencha touch: Error-" The following classes are not declared even if their files have been loaded: 'Ext.panel'
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSencha touch: Error-" The following classes are not declared even if their files have been loaded: 'Ext.panel'
    text
    copied!<p>I have just started with sencha touch,really impressed with sencha documentation and its native feel. I was trying out this <a href="http://docs.sencha.com/touch/2.0.2/#!/guide/getting_started" rel="nofollow">link</a>. 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?</p> <p>Here is my code App.js</p> <pre><code>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(); } } ); } }); </code></pre> <p>Main.js</p> <pre><code>Ext.define('hello.view.Main', { extend: 'Ext.tab.Panel', requires: [ 'Ext.TitleBar' ], config: { tabBarPosition: 'bottom', items: [ { xtype:'homepanel' } ] } }); </code></pre> <p>Home.js</p> <pre><code>Ext.define('Hello.View.Home',{ extend:'Ext.panel', xtype:'homepanel', config:{ title:'Home', iconCls:'home', html: [ '&lt;img src="http://staging.sencha.com/img/sencha.png" /&gt;', '&lt;h1&gt;Welcome to Sencha Touch&lt;/h1&gt;', "&lt;p&gt;You're creating the Getting Started app. This demonstrates how ", "to use tabs, lists, and forms to create a simple app&lt;/p&gt;", '&lt;h2&gt;Sencha Touch&lt;/h2&gt;' ].join("") } }); </code></pre> <p>index.html</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html manifest="" lang="en-US"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;hello&lt;/title&gt; &lt;style type="text/css"&gt; &lt;/style&gt; &lt;!-- The line below must be kept intact for Sencha Command to build your application -&gt; &lt;script id="microloader" type="text/javascript" src="touch/microloader/development.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="app/view/Home.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="appLoadingIndicator"&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload