在extjs中如何將存儲數據綁定到網格

Question

我正在使用extjs。我創建視圖，其顯示grid.i創建視圖原樣

Ext.define('Balaee.view.qb.qbqns.allQuestionPapers' , 
     { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.paperlist', 
    id:'paperId', 
    store:'QbqnsStore', 
    border:false, 
    height:300, 
    width:450, 
    columns: [ 
       { 
        text: 'date', 
        width: 150, 
        dataIndex: 'creationTime' 
       }, 
       { 
        text: 'QuestionpaperNo', 
        width: 150, 
        dataIndex: 'questionPaperNo', 
       }, 
       { 
        text: 'Marks', 
        width:150, 
        dataIndex: 'obtainMarks' 
       } 
       ] 
     }); 

這個觀點我在getAllPapers按鈕點擊呼叫。所以，我寫的代碼原樣

getAllPapers:function() 
    { 
     var getPaperStore=Ext.create('Balaee.store.qb.QbqnsStore'); 
     proxy=reviewQuestionStore.getProxy(); 
     Ext.apply(proxy.api,{ 
      read:'index.php/QuestionBank/qbpaper/getUserAllQuestionPaper', 
     }); 

     var temp2=Ext.getCmp('QbqnsResultmainId'); 
     temp2.removeAll(); 
     var papers=Ext.create('Balaee.view.qb.qbqns.allQuestionPapers'); 
     temp2.add(papers); 

    } 

在上面的功能我打電話所需的網址，獲取JSON原樣

{" Papers ":[{"questionPaperId":"29","questionPaperNo":"11","userId":"106","allocatedTime":null,"completedTime":"0000-00-00 00:00:00","createDate":"0000-00-00 00:00:00","obtainMarks":null},{"questionPaperId":"30","questionPaperNo":"11","userId":"106","allocatedTime":null,"completedTime":"0000-00-00 00:00:00","createDate":"0000-00-00 00:00:00","obtainMarks":null},{"questionPaperId":"31","questionPaperNo":"11","userId":"106","allocatedTime":null,"completedTime":"0000-00-00 00:00:00","createDate":"0000-00-00 00:00:00","obtainMarks":null}] } 

所以現在店裏是有這個上面JSON數據，我想提供它網格視圖。但網格不顯示任何數據。那麼如何將商店數據綁定到網格？我需要做些什麼改變？

Answer 1

我們需要將商店綁定到網格，同時初始化自己。我在我的情況做了如下：

Ext.define('App.view.activity.ListPanel', { 

    extend: 'Ext.panel.Panel', 
    alias: 'widget.listPanel', 

    requires: [ 
     'Ext.data.ArrayStore' 
    ], 

    initComponent: function(){ 

     var activityStore = Ext.create('App.store.Activity'); 
     activityStore.load(); // this line to load is used when we use proxy in store, if we go with out proxy it is not necessary 

     Ext.apply(this, {    
       items: [{ 
        xtype: 'grid',     
        hideHeaders: true, 
        scroll: false, 
        width: 200, 
        height: 700, 
        store: activityStore, 
        stripeRows:true, 
        columnLines:true, 
        columns:[ 
         {text:"Activity Name",flex:1,dataIndex:"activityName"} 
         ]     
       }]  
     }); 

     this.callParent(arguments); 
    } 
}); 

凡App.store.Activity被定義爲（無代理）：

Ext.define('App.store.Activity', { 
    extend: 'Ext.data.Store', 
    id: 'activityStore', 
    model: 'App.model.Activity', 
    autoLoad: true, 
    data : [ 
      {activityName: 'Bath', createdBy: 'Spencer', scheduleTime: '7.00'}, 
      {activityName: 'Breakfast', createdBy: 'Maintz', scheduleTime: '8.00'}, 
      {activityName: 'Wakeup', createdBy: 'Conran', scheduleTime: '5.00'} 
     ] 
});` 

與代理：

Ext.define('App.store.Activity', { 
    extend: 'Ext.data.Store', 
    id: 'transactionSummaryStore', 
    model: 'App.model.Activity', 
    proxy: { 
     type: 'ajax', 
     url: 'getActivities.htm', 
     reader: { 
      type: 'json', 
      root: 'results' 
     } 
    } 
}); 

其中Model定義爲：

Ext.define('App.model.Activity', { 
    extend: 'Ext.data.Model', 
    fields : [ { 
     name : 'activityName' 
    }, { 
     name : 'createdBy' 
    }, { 
     name : 'scheduleTime' 
    } ] 
});