Javascript 如何在extjs中以简单的网格显示数据_Javascript_Eclipse_Extjs_Extjs4

Javascript 如何在extjs中以简单的网格显示数据

javascript eclipse extjs extjs4

Javascript 如何在extjs中以简单的网格显示数据,javascript,eclipse,extjs,extjs4,Javascript,Eclipse,Extjs,Extjs4,为什么输出不显示在浏览器中我有所有的Eclipse设置，我正在使用Chrome <html> <head> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script

为什么输出不显示在浏览器中

我有所有的Eclipse设置，我正在使用Chrome

<html>
  <head>
      <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
      <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
      <script type="text/javascript" src="extjs/ext-all.js"></script>

    <script type="application/javascript" >

    Ext.onReady(function(){ 

    var store = new Ext.data.Store({  data: [ [ 1, "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1  ],

    [3, "Super Troopers", "Jay Chandrasekhar", "2002-02-15",  1, "Altered State Police",  "14.95", 1  ] ],

    reader: new Ext.data.ArrayReader({id:'id'}, [ 'id', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', 'price',    'available'  ] });


    var grid = new Ext.grid.GridPanel({  renderTo: document.body, frame:true, title: 'Movie Database',  height:200, width:500,  store: store, 
    columns: [ {header: "Title", dataIndex: 'title'},        
     {header: "Director", dataIndex: 'director'},        
     {header: "Released", dataIndex: 'released',
     renderer: Ext.util.Format.dateRenderer('m/d/Y')},
     {header: "Genre", dataIndex: 'genre'},  
     {header: "Tagline", dataIndex: 'tagline'} ] });    
    </script>     
   </head>
   <body>     
   </body>
</html>


Ext.onReady（函数（）{
var store=new Ext.data.store（{data:[[1，“办公空间”，“迈克法官”，“1999-02-19”，1，“工作糟透了”，“19.95”，1]，
[3，“超级骑警”，“杰伊·钱德拉塞卡”，“2002-02-15”，1，“改变的州警察”，“14.95”，1]]，
阅读器：新的Ext.data.ArrayReader（{id:'id'}，['id'，title'，director'，{name:'released'，type:'date'，dateFormat:'Y-m-d'}，'流派'，'标语'，'price'，'available']}）；
var grid=new Ext.grid.GridPanel（{renderTo:document.body，frame:true，title:'Movie Database'，高度：200，宽度：500，存储：store，
列：[{标题：“标题”，数据索引：“标题”}，
{标题：“Director”，数据索引：“Director'}，
{标题：“已发布”，数据索引：“已发布”，
渲染器：Ext.util.Format.dateRenderer（'m/d/Y'）}，
{标题：“流派”，数据索引：“流派”}，
{标题：“Tagline”，数据索引：“Tagline'}]}）；

如果我运行您的精确代码，我会在调试器控制台中得到错误

TypeError:me.model未定义。

此错误暗示的是您没有为存储定义模型或字段（稍后将详细介绍）。因此，您要做的第一件事是使用某种浏览器调试器（

ctrl-shift-i

适用于Windows上的Firefox/Chrome）

其次，如果您使用的是Ext JS 4，那么您将需要使用更新版本的框架自动推断如何组织存储中的数据，因此如果您使用的是v5+，则不需要执行此步骤。我们之所以使用这种特殊类型的存储，是因为您的数据是如何组织到阵列中的

最后一件事是为您的存储设置一个，或者为您的数据组成的设置一个…您当前在读卡器中有这些字段，但将它们放在那里没有多大意义。此外，a位于代理内部，您通常不必对读卡器本身做太多操作

这里有一个工作：

当您发布任何代码时，请将其正确格式化以便于理解。

Ext.application({
  name: 'Fiddle',

  launch: function() {
    var store = new Ext.data.ArrayStore({
      data: [
        [1, "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1],

        [3, "Super Troopers", "Jay Chandrasekhar", "2002-02-15", 1, "Altered State Police", "14.95", 1]
      ],
      fields: [{
          name: 'id',
          type: 'int'
        }, {
          name: 'title',
          type: 'string'
        }, {
          name: 'director',
          type: 'string'
        }, {
          name: 'released',
          type: 'date',
          dateFormat: 'Y-m-d'
        }, {
          name: 'genre',
          type: 'int'
        }, {
          name: 'tagline',
          type: 'string'
        }, {
          name: 'price',
          type: 'string'
        }, {
          name: 'available',
          type: 'int'
        }]
        //reader: new Ext.data.ArrayReader({id:'id'}, [ 'id', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', 'price',    'available'  ])
    });


    var grid = new Ext.grid.GridPanel({
      renderTo: document.body,
      frame: true,
      title: 'Movie Database',
      height: 200,
      width: 500,
      store: store,
      columns: [{
        header: "Title",
        dataIndex: 'title'
      }, {
        header: "Director",
        dataIndex: 'director'
      }, {
        header: "Released",
        dataIndex: 'released',
        renderer: Ext.util.Format.dateRenderer('m/d/Y')
      }, {
        header: "Genre",
        dataIndex: 'genre'
      }, {
        header: "Tagline",
        dataIndex: 'tagline'
      }]
    });
  }
});