应用错误收集

下面的EXTjs MVC示例不起作用

时间：2016-04-22 13:27:54

标签： extjs

的index.html

    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="page-title">EXTJS MVC Example</title>
    <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">
    <!-- GC -->
    <!-- <x-compile> -->
    <!-- <x-bootstrap> -->
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <!-- </x-bootstrap> -->
    <script type="text/javascript" src="LogApp.js"></script>
    <!-- </x-compile> -->
  </head>
  <body>
  </body>
</html>

LogApp.js

    Ext.Loader.setConfig({
    enabled: true
});
Ext.application({
  name: 'EXTJSMVCExample',
  appFolder: 'app',
  // Attach store classes to this controller
  stores: ['LogStore'],
  // Attach model classes to this controller
  models: ['LogModel'],
  // ..and last but not least - the view classes
  views: ['Log.LogGrid'],

  // Attach controllers
  controllers: ['LogController'],

  launch: function() {
        Ext.create('Ext.container.Viewport',{
            style:{"background-color":"#ffffff", 
                "border-color": "#c6c6c6"},
            items:[
              {xtype: 'logGrid'}
            ]
        });
    }

});

LogController.js

    Ext.define('EXTJSMVCExample.controller.LogController', {
  // Extend basic controller object
  extend: 'Ext.app.Controller',

  init: function() {
    this.control({
      'logGrid': {
        itemdblclick: this.editRow
      }
    });
  },
  editRow : function(){
    Ext.Msg.alert("Message", "Double click event on the row!");
  }
});

LogModel.js

Ext.define('EXTJSMVCExample.model.LogModel', {
  extend: 'Ext.data.Model',
  idProperty: 'id',
  fields: [
        {name: 'domain', type: 'String'},
        {name: 'type', type: 'String'},
        {name: 'ip', type: 'String'},
        {name: 'users', type: 'String'},
        {name: 'description', type: 'String'}
    ]
});

LogStore.js

 Ext.define('EXTJSMVCExample.store.LogStore', {
  extend: 'Ext.data.Store',
  model: 'EXTJSMVCExample.model.LogModel',
  autoLoad: true,
  proxy: {
    // Defined this proxy type
    type: 'ajax',
    method: 'GET',
    // Data source
    url: 'data/data.json',
    reader: {
      type: 'json'
    }
  }
});

LogGrid.js

    Ext.define('EXTJSMVCExample.view.Log.LogGrid', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.logGrid',
  autoHeight: true,
  title: 'Logs',
  store: 'LogStore',
  name: 'logGrid',
  id: 'logGrid',
  loadMask: true,
  syncRowHeight: true,
  columns: [
      {
          text     : 'Domain',
          sortable : true,
          width    : 150,
          dataIndex: 'domain',
          sortable: false,
      },
      {
          text     : 'Type',
          sortable : true,
          width    : 100,
          dataIndex: 'type'
      },
      {
          text     : 'Device IP',
          width    : 100,
          dataIndex: 'ip',
          sortable: false,
      },
      {
          text     : 'Users',
          sortable : true,
          width    : 100,
          dataIndex: 'users'

      },
      {
          text     : 'Description',
          sortable : true,
          width    : 700,
          dataIndex: 'description'
      }
  ]
});

data.json

    [
    {
    "domain": "a",
    "type": "INFO",
    "ip":"127.0.0.1",
    "users": "abc",
    "description": "xyz"
    },    {
    "domain": "b",
    "type": "INFO",
    "ip":"127.0.0.1",
    "users": "abc",
    "description": "xyz"
    },    {
    "domain": "c",
    "type": "INFO",
    "ip":"127.0.0.1",
    "users": "abc",
    "description": "xyz"
    },    {
    "domain": "d",
    "type": "INFO",
    "ip":"127.0.0.1",
    "users": "abc",
    "description": "xyz"
    }
]

控制台中没有错误，但网格出现时没有任何数据。请帮忙。提前谢谢。

3 个答案:

答案 0 :(得分：0)

尝试更改下面的json并运行..

{
data:  [
{
"domain": "a",
"type": "INFO",
"ip":"127.0.0.1",
"users": "abc",
"description": "xyz"
},    {
"domain": "b",
"type": "INFO",
"ip":"127.0.0.1",
"users": "abc",
"description": "xyz"
},    {
"domain": "c",
"type": "INFO",
"ip":"127.0.0.1",
"users": "abc",
"description": "xyz"
},    {
"domain": "d",
"type": "INFO",
"ip":"127.0.0.1",
"users": "abc",
"description": "xyz"
}]
}

答案 1 :(得分：0)

保持json已修改并添加＆＃34; root：data＆＃34;在你的商店

reader: {
  type: 'json',
  root: 'data'
}

答案 2 :(得分：0)

我终于明白了。我试图动态加载数据，但在本地加载Web应用程序。后来我从Web服务器（tomcat）运行它，它正确显示我的数据。