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

-1

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

来源

2015-10-18 padhy

在您发表的任何代码，那么请让它正确格式化为清晰的认识。 –

如果我运行您的确切代码，我会在调试器控制台中得到错误TypeError: me.model is undefined。这个错误暗示的是你没有为你的商店定义的模型或字段（稍后更多）。所以你要做的第一件事就是使用某种浏览器调试器（在Windows上为Firefox/Chrome使用ctrl-shift-i）。其次，如果您使用的是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' 
     }] 
    }); 
    } 
});

来源

2015-10-19 00:38:31 incutonez

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

回答

相关问题