如何在簡單的網格中顯示數據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

回答

相關問題