如何使用ExtJs在窗口中顯示網格？

Question

Thare是我ExtJs應用程序中的問題。
我想在窗口中顯示網格。我說：

列模型：

  var markCm = new Ext.grid.ColumnModel({ 
      columns:[{ 
       header: 'Аннотация', 
       dataIndex: 'annotation', 
       width: 230, 
      },{ 
       header: 'Дата', 
       dataIndex: 'mark_date', 
       width: 30 
      },{ 
       header: 'Статус', 
       dataIndex: 'status', 
       width: 30 
      }], 
      defaults: { 
       flex: 1 
      } 
     }); 
     console.log("1"); 

網：

  var markGrid = new Ext.grid.GridPanel({ 
      //store: markStore, 
      cm: markCm, 
      selModel: new Ext.grid.RowSelectionModel(), 
      stripeRows : true, 
      //height: 400, 
      //loadMask: true, 
      id: 'markGrid', 
      autoScroll: true, 
     }); 

窗口：

  console.log("2"); 
     var markWin = new Ext.Window({ 
      id: 'markWindow', 
      layout: 'fit', 
      title:'Спискок маркеров', 
      autoScroll:false, 
      //width:600, 
      items:[markGrid], 
      listeners:{ 
      } 
     }); 
     console.log("3"); 
     markWin.show(); 
     console.log("4"); 

而且在螢火蟲我看到：

1 
2 
3 
TypeError: this.ds is undefined 
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e... 

什麼可能是錯的？

UPDATE

我嘗試在此example

  var markGrid = new Ext.grid.GridPanel({ 
      store: Ext.create('Ext.data.ArrayStore', {}), 
      cm: markCm, 
      selModel: new Ext.grid.RowSelectionModel(), 
      stripeRows : true, 
      //height: 400, 
      //loadMask: true, 
      id: 'markGrid', 
      autoScroll: true, 
     }); 

添加店等，並得到錯誤：

1 
TypeError: d[a] is not a constructor 
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e... 

Answer 1

你缺少的商店。每個網格都需要一個商店。 （this.ds是undefined => ds很可能是數據存儲）

我不知道你使用的是什麼版本。 （檢查，通過在控制檯鍵入Ext.versions.extjs.version）

在您正在使用最新版本的ExtJS（4.x版）工作的情況下，最好使用Ext.define和Ext.create，而不是使用new關鍵字:)

這裏是一個working fiddle

Ext.onReady(function() { 
    Ext.define('MyApp.model.Mark', { 
     extend: 'Ext.data.Model', 
     fields: [{ 
      name: 'id', 
      type: 'int' 
     }, { 
      name: 'annotation', 
      type: 'string' 
     }, { 
      name: 'mark_date', 
      type: 'date' 
     }, { 
      name: 'status', 
      type: 'string' 
     }] 
    }); 
    Ext.define('MyApp.store.Marks', { 
     extend: 'Ext.data.Store', 

     //best to require the model if you put it in separate files 
     requires: ['MyApp.model.Mark'], 
     model: 'MyApp.model.Mark', 
     storeId: 'markStore', 
     data: { 
      items: [{ 
       id: 1, 
       annotation: "Test", 
       mark_date: "2013-04-24 9:28:00", 
       status: "Done" 
      }] 
     }, 
     proxy: { 
      type: 'memory', 
      reader: { 
       type: 'json', 
       root: 'items' 
      } 
     } 
    }); 

    var grid = Ext.create('Ext.grid.Panel', { 
     itemId: 'markGrid', 
     store: Ext.create('MyApp.store.Marks'), 
     loadMask: true, 
     width: 400, 
     columns: [{ 
      header: 'Аннотация', 
      dataIndex: 'annotation', 
      width: 230, 
      flex: 1 
     }, { 
      header: 'Дата', 
      dataIndex: 'mark_date', 
      width: 30, 
      flex: 1 
     }, { 
      header: 'Статус', 
      dataIndex: 'status', 
      width: 30, 
      flex: 1 
     }] 
    }); 

    var window = Ext.create('Ext.window.Window', { 
     renderTo: Ext.getBody(), 
     items: [grid] 
    }); 

    window.show(); 
}); 

UPDATE

您正在使用來自外部4.x的一個例子=>Ext.data.ArrayStore 不能通過Ext.create被創建，但在內線的版本4.x版< :)

http://jsfiddle.net/Vandeplas/BZUxa/

Ext.onReady(function() { 
    var markCm = new Ext.grid.ColumnModel({ 
     columns: [{ 
      header: 'Аннотация', 
      dataIndex: 'annotation', 
      width: 230, 
     }, { 
      header: 'Дата', 
      dataIndex: 'mark_date', 
      width: 30 
     }, { 
      header: 'Статус', 
      dataIndex: 'status', 
      width: 30 
     }], 
     defaults: { 
      flex: 1 
     } 
    }); 
    var markGrid = new Ext.grid.GridPanel({ 
     store: new Ext.data.ArrayStore({}), 
     cm: markCm, 
     selModel: new Ext.grid.RowSelectionModel(), 
     stripeRows: true, 
     //height: 400, 
     //loadMask: true, 
     id: 'markGrid', 
     autoScroll: true, 
    }); 
    var markWin = new Ext.Window({ 
     id: 'markWindow', 
     layout: 'fit', 
     title: 'Спискок маркеров', 
     autoScroll: false, 
     //width:600, 
     items: [markGrid], 
     listeners: {} 
    }); 

    markWin.show(); 
});