Question

为什么输出没有显示在浏览器中？

我拥有所有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>

Answer 1

如果我运行您的确切代码，我会在调试器控制台中收到错误TypeError: me.model is undefined。这个错误暗示的是你没有为你的商店定义的模型或字段（稍后会详细介绍）。因此，您要做的第一件事就是使用某种浏览器调试器（ctrl-shift-i用于Windows上的Firefox / Chrome）。

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

您要做的最后一件事是为您的商店设置Model，或者为您的数据设置fields ...您当前在这些字段中设置了这些字段读者，但将它们放在那里并没有多大意义。此外，reader在代理内部，你通常不必为读者本身做太多。

这是一个有效的example：

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

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

1 个答案: