Extjs6.0 grid 列表绑定json数据

最近在做一个项目由于前段使用extjs6.0,  简单记录一下grid列表绑定json数据如何实现,如下图, 是一个简单的功能模块：

图中是一个数据列表绑定json数据源，实现步骤：

1.首先得有一个返回json格式数据源接口,这里就不写了。

2.Ext6.0可以创建一个Model ，并且指向一个stroe, url写自己的接口名称，JS代码如下

Ext.define('app.model.agent.AgentEvalViewModel', {

extend: 'Ext.app.ViewModel',
alias: 'viewmodel.AgentEvalViewModel',
data: { 
agentEvalStore: Ext.create("Ext.data.Store", { 
//model: "app.model.firstReview.FirstReviewModel",
id:'agentEvalStore',
    autoLoad: true,
    pageSize: 20,
    baseParams: {},
    proxy: {
        type: "ajax",
        url: "/ZLXT/api/agencyevaluate/list",//代理机构接口list
        extraParams:{},
        actionMethods: {
read: 'POST'
},
        reader: {
type: 'json',
rootProperty: "resultData",
messageProperty: 'msg',
totalProperty: 'total'
}
    } 
})
}

});

3.创建好Model之后，需要在你的主页面上引入Model ，requires:['app.model.agent.AgentEvalViewModel']

并且写上viewModel:{type:'AgentEvalViewModel'} 这里的AgentEvalViewModel就是刚刚我们创建的Model的alias别名

3.接下来就是grid 部分的关键代码,首先写上 bind:{store:"{agentEvalStore}"}, 这里的agentEvalStore就是model定义的stroe的id, 上面Model代码中有写到。

                region: 'center',
                xtype: 'grid',
                name: 'gridOp',
                bind:{
                store:"{agentEvalStore}"
                },
                bbar : {
xtype : 'gridPageBar'
},
                columnLines: true,
                selModel: Ext.create("Ext.selection.CheckboxModel", {
                    injectCheckbox: 0,//checkbox位于哪一列，默认值为0,0为rownumber列
                    mode: "simple",//multi,simple,single；默认为多选multi
                    checkOnly: true,//如果值为true，则只用点击checkbox列才能选中此条记录
                    allowDeselect: true,//如果值true，并且mode值为单选（single）时，可以通过点击checkbox取消对其的选择
                    enableKeyNav: true
                }),
                columns: [
              {
                    text: '操作',
                    width: 60,
                    hidden:true,
                    align: 'center',
                    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                        return '<a href="#" class="Link1">编辑</a>';
                    }
                },  {
                text: '唯一标识',
                id:'AgencyEvaluateKey',
                name:'AgencyEvaluateKey',
                dataIndex: 'agencyEvaluateKey',
                },{
                    text: '名称',
                    width:200,
                    dataIndex: 'agencyEvaluateName',
                    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                        return '<a href="#" class="Link1">'+value+'</a>';
                    }

                },    

{
                    text: '状态',
                    width: 90,
                    align: 'center',
                    dataIndex: 'evaluatestartup',
                    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                    if(value=="1"){
                    return "<a href='#' class='Link1'>已开启</a>";
                    }else{
                    return "<a href='#' class='Link1'>关闭</a>";
                    }
                    }
                }, {
                    text: '年度',
                    width: 90,
                    align: 'center',
                    dataIndex: 'agencyYear'
                }, {
                    text: '发起人',
                    width: 90,
                    align: 'center',
                    dataIndex: 'creater'
                }, {
                    text: '发起时间',
                    width: 90,
                    align: 'center',
                    dataIndex: 'createDate',
                    renderer: function(val) {  
                        if(val!=null){
                        return new Date(val).format("yyyy-MM-dd hh:mm:ss"); 
                        }
                       } 
                }, {
                    text: '被评机构',
                    width:200,
                   // dataIndex: 'f3',
                    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                    var list=record.get("agencymiddletableList");
                    var agencyNames="";
                    for(var i=0;i<list.length;i++){
                    var result=list[i].agencyName;
                    agencyNames+=result+","
                    }
                    agencyNames=agencyNames.substring(0, agencyNames.lastIndexOf(','));  
              return '<a href="#" class="Link2">查看</a>'+userNames;
                    }
                }]

          

   dataIndex: 'f3'  相当于json数据的名称键，修改f3换成对应的名称键就可以。