如何使用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(); 
});