在 extjs 中如何将存储数据绑定到网格

Posted

技术标签:

【中文标题】在 extjs 中如何将存储数据绑定到网格【英文标题】:In extjs How to bind store data to grid 【发布时间】:2013-02-11 13:46:30 【问题描述】:

我在 extjs 工作。我正在创建显示网格的视图。我已经创建了视图-

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

    

在上面的函数中,我调用所需的 URl 来获取 json as-

" 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 数据,我想在视图中的网格中提供它。但网格不显示任何数据。那么如何将存储数据绑定到网格?我需要做哪些改变?

【问题讨论】:

【参考方案1】:

我们需要在初始化时将 store 绑定到一个网格。我的情况如下:

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'
         
     
);

其中模型定义为:

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

【讨论】:

以上是关于在 extjs 中如何将存储数据绑定到网格的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Extjs 中刷新 GridView?

extjs 5 商店同步绑定到选择 hasMany

ExtJS 4.2网格单元格编辑如何将列值与组合显示值绑定

ExtJs Gridpanel 存储刷新

ExtJS - 如何在未绑定到商店的列表 itemTpl 中使用变量

Extjs 将另一个商店作为另一个属性绑定到网格