ExtJs가있는 창에서 그리드를 표시하는 방법은 무엇입니까?

Question

내 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... 

뭐가 잘못 될 수 있습니까? 당신은 상점을 누락

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

Answer 1

:

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, 
     }); 

에 같은 저장소를 추가하고 오류가보십시오. 모든 그리드에는 상점이 필요합니다. (this.ds는 정의되지 않음 => ds는 아마도 dataStore입니다.)

어떤 버전을 사용하고 있는지 잘 모릅니다. Ext.define 및 Ext.create를 사용하는 것이 바람직 대신 '새로운'키워드 :

을 사용하면 최신의 ExtJS 버전 (4.x를) 사용하여 작업하는 경우

를 (콘솔에서 Ext.versions.extjs.version을 입력하여 그 확인) 여기에서 내선 4.x의 예를 사용

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이다 =>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(); 
});