How to get access to a sencha-Ext-js 4 view via app.js file?

Question

I'm a newbie on sencha-ExtJs and I was trying to understand how it works by setting a test application.

First this is my app architecture:

/senchatestapp/  <--- here i have all my app files
   /sencha/  
       /controller/
       /model/
       /view/   
          login.js
       /store/
   /extjs/    <---- here i have my sencha library files
       ext-all.js
       /resources/
            /css/
               ext-all.css
    app.js
    index.html

These are my files content:

app.js:

    Ext.application({
       name: 'Senchatest',
       appFolder: 'sencha',

       launch: function() {
           Ext.create('Ext.container.Viewport', {
               layout: 'fit',
               renderTo: Ext.getBody(),
               items: [
                    {
                        xtype: 'loginview'
                    }   
               ]         

           });
       }
    });

login.js:

         Ext.define('Senchatest.view.Login', {
         extend: 'Ext.grid.Panel',
         height: 130,
         width: 280,
         bodyPadding: 10,
         alias : 'widget.loginview',
         initComponent: function() {
             this.items = [
                    {
                        xtype: 'form',

                        items: [
                           {
                              xtype: 'textfield',
                              name : 'login',
                              fieldLabel: 'Login'
                           },
                           {
                              xtype: 'textfield',
                              name : 'pwd',
                              fieldLabel: 'pwd'
                           }
                       ]
                    }
             ];

            this.buttons = [
                {
                     text: 'Ok'
                }
            ];

          this.callParent(arguments);
        }
   });

And finally my index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>sencha test</title>
        <link rel="stylesheet" type="text/css" href="ext-js/resources /css/ext-all.css">
        <script type="text/javascript" src="ext-js/ext-all.js"></script>
        <script type="text/javascript" src="app.js"></script>

     </head>
     <body>
     </body>
</html>

I put the app folder in tomcat/webapps/ directory.
When I launch the app I'm just getting a blank page nevertheless app.js should have request the view to render on the <body> tag.

I just want the view to be rendered, nothing else for the moment (nothing about controlling or read/sending data etc.).

I don't know where I made a mistake or what I'm not understanding but I'll be very happy to get this solved.

Put entire sencha created project inside webapps directory instead only app folder — Abhijit Muke
when i mentioned the app folder i was talking about my senchatestapp folder... is there something wrong about my code? — Philippe Simo
Are you able to run that code on browser for local environment ? — Abhijit Muke
yes of course but im getting a blank page as i said: meaning that the sencha components are not loaded. — Philippe Simo
When you get a blank page, open browser console. There has to be at least one error if you load anything at all (e.g. your own code) but the page stays blank. — Alexander

Philippe Simo Philippe Simo · Accepted Answer · 2016-05-01T12:20:16

In the app.js file, i removed the appFolder config and i mentioned manually in index.html file the location of login.js file.

so the file app.js become:

app.js file
-----------
 Ext.application({
   name: 'Senchatest',
   launch: function() {

       Ext.create('Ext.container.Viewport', {

           renderTo: Ext.getBody(),
           items:  [{xtype: 'loginview'}]

       });
   }
});

and index file become

index.html
----------
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
      <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
               <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
                <title>sencha test</title>
                <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
                <script type="text/javascript" src="extjs/ext-all.js"></script>
                <script type="text/javascript" src="sencha/view/login.js"></script>
                 <script type="text/javascript" src="app.js"></script>

          </head>
     <body>
   </body>
 </html>

How to get access to a sencha-Ext-js 4 view via app.js file?

1 Answers