Question

我是 sencha-ExtJs 的新手，我试图通过设置测试应用程序来了解它是如何工作的。

首先，这是我的应用架构：

/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

这些是我的文件内容：

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);
        }
   });

最后我的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>

我将app文件夹放在tomcat / webapps /目录中当我启动应用程序时，我只是得到一个空白页面，然而app.js应该请求在<body>标记上呈现视图。

我只想要渲染视图，暂时没有其他内容（没有关于控制或读取/发送数据等）。

我不知道我犯了什么错误或我不理解的地方，但我很乐意解决这个问题。

Answer 1

在app.js文件中，我删除了appFolder配置，我在index.html文件中手动提到了login.js文件的位置。

所以文件app.js变为：

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

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

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

       });
   }
});

和索引文件变为

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>

如何通过app.js文件访问sencha-Ext-js 4视图？

1 个答案: