Question

我是ExtJs 6.0的新手，我必须创建一个自动填充HTML文本的网页。在本地主机上它工作正常，但当我尝试通过我的应用程序文件夹中的index.html加载我的应用程序时，它什么也没显示

这是我的第一堂课“名单”

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
    { name:'position', type:'string' },
    { name:'title', type:'string' },
        {name:'rate', type:'string'}
    ]
    });
    var store = Ext.create('Ext.data.Store', {
        model: 'User',
        proxy: {
             type: 'ajax',
             url: '/app/view/main/data.json',
            method:'GET',
            reader: {
                 type: 'json',
                 root: 'foo'
             }
         },
         autoLoad: true
      });
     var notiTpl = new Ext.XTemplate(
     '<h1>TIOBE rate</h1>',
                                        '<table>',
                                            '<tr>',
                                                '<td>Position on 2015</td>',
                                                '<td>Programming language</td>',
                                                '<td>Rate</td>',
                                                '<td>Group</td>',
                                            '</tr>',
                                            '<tpl for=".">',
                                            '<tr <tpl if="values.position%2 ==         1">style="background-color: silver;"</tpl>>',
                                                '<td>{position}</td>',
                                                '<td>{title}</td>',
                                                '<td>{rate}</td>',
                                                '<tpl if="values.position<3">',
                                                    '<td>A</td>',
                                                '<tpl elseif="values.position<5">',
                                                        '<td>B</td>',
                                                '<tpl else>',
                                                        '<td>C</td>',
                                                '</tpl>',
                                            '</tr>',
                                            '</tpl>',
                                        '</table>');

 Ext.define('App.view.main.List', {
    extend: 'Ext.view.View',
    xtype: 'mainlist',
    store: store,
      tpl: notiTpl,
      itemSelector: 'div.thumb-wrap',
      emptyText: 'There is no text',
      renderTo: Ext.getBody()

});

第二课“主”

Ext.define('App.view.main.Main', {
    extend: 'Ext.panel.Panel',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',

        'App.view.main.List'
    ],


    items: [{
        title: 'Some html text',
        items: [{
            xtype: 'mainlist'
        }]
    }]
});

我的app.js

/*
 * This file is generated and updated by Sencha Cmd. You can edit this file as
 * needed for your application, but these edits will have to be merged by
 * Sencha Cmd when upgrading.
 */
Ext.application({
    name: 'App',

    extend: 'App.Application',

    requires: [
        'App.view.main.Main'
    ],

    // The name of the initial view to create. With the classic toolkit this class
    // will gain a "viewport" plugin if it does not extend Ext.Viewport. With the
    // modern toolkit, the main view will be added to the Viewport.
    //
    mainView: 'App.view.main.Main'

    //-------------------------------------------------------------------------
    // Most customizations should be made to App2.Application. If you need to
    // customize this file, doing so below this section reduces the likelihood
    // of merge conflicts when upgrading to new versions of Sencha Cmd.
    //-------------------------------------------------------------------------
});

我的Application.js

/**
 * The main application class. An instance of this class is created by app.js when it
 * calls Ext.application(). This is the ideal place to handle application launch and
 * initialization details.
 */
Ext.define('App.Application', {
    extend: 'Ext.app.Application',

    name: 'App',

    stores: [
        // TODO: add global / shared stores here
    ],

    launch: function () {
      Ext.create('App.view.main.Main').show();
    },

    onAppUpdate: function () {
        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
            function (choice) {
                if (choice === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

我的index.html

    <!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>App</title>
  <script type="text/javascript" src="ext/build/ext-all.js"></script>

        <script type="text/javascript" src="app.js"></script>



    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" data-app="b0beccc4-d014-4af3-919d-fd0a75c6c656" type="text/javascript" src="bootstrap.js"></script>

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

我已经阅读了大量文档，但没有任何帮助。

更新

我不知道如何，但现在它只显示xtemplate循环的一部分。它停留在开始通过json数据渲染的部分，尽管localhost：1841仍然显示整个信息

Answer 1

我把它弄清楚了。关键在于CORS。如果有人遇到同样的问题 - 只需使用Mozila。

无法在ExtJs项目中启动我的index.html

更新

1 个答案: