Javascript ExtJS：在网格中将模型列转换为行

我对ExtJS非常陌生，希望实现以下目标：

我有一个数据如下的模型：

{
   "Account_Enabled": true, 
   "Requirements_gathered": true, 
   "work_done": false, 
   "deadlines": {
     "Account_Enabled": true, 
     "Requirements_gathered": false
    }
}

没有多行。只有一行从数据库返回

我想在一个有三列的网格中显示数据 Column1：列的名称 第2列：显示值是真还是假的复选框 Column3：显示列名是否出现在“截止日期”中的复选框

例：

帐户\已启用True True

所收集的需求是真是假

工作完成错误未定义（需要禁用复选框）

基本上，我需要将这一行转换为三列。 此外，我需要在用户选中/取消选中复选框时更新存储

我可以知道是否有任何方法可以通过ExtJS网格实现这一点吗？还是有更好的办法

---

提前感谢

没有直接的方法将您提到的格式的json响应绑定到网格存储

您需要做的是操纵响应以匹配所需的网格列

检查这个工作示例

---

没有直接的方法将您提到的格式的json响应绑定到网格存储

您需要做的是操纵响应以匹配所需的网格列

检查这个工作示例

---

非常感谢您的回答：）。它真的很有用。显示从存储区返回的数据是可行的。但是如果有人编辑任何单元格，我如何更新数据库？有什么建议吗？对于后端，您应该使用具有3个属性colName、isreqcollected和isWorkDone的bean，这样您就可以从前端到后端检测这些值，如果后端有这些数据，您就可以在那里编写解决方案。因此，您需要从服务器sideHi@moataz-Sanad进行数据操作：后端不愿意更改模式/逻辑。因此，我通过以下方法解决了这个问题：在checkchange事件中，我格式化模型并调用viewmodel上的notify，然后将数据发送回服务器var属性='data.detailures.Accounts_enabled'page.getViewModel（）.set（property，checked）非常感谢您的回答：）。它真的很有用。显示从存储区返回的数据是可行的。但是如果有人编辑任何单元格，我如何更新数据库？有什么建议吗？对于后端，您应该使用具有3个属性colName、isreqcollected和isWorkDone的bean，这样您就可以从前端到后端检测这些值，如果后端有这些数据，您就可以在那里编写解决方案。因此，您需要从服务器sideHi@moataz-Sanad进行数据操作：后端不愿意更改模式/逻辑。因此，我通过以下方法解决了这个问题：在checkchange事件中，我格式化模型并调用viewmodel上的notify，然后将数据发送回服务器var属性='data.detailures.Accounts_enabled'page.getViewModel（）.set（属性，选中）

//Your Original Response
let response = '{"Account_Enabled": true, "Requirements_gathered": true, "work_done": false, "deadlines": {"Account_Enabled": true, "Requirements_gathered": false}}';
// Convert your response to object
let jsonDecode = Ext.decode(response);

//This function to convert your response to match grid store
let dataConvert = function(jsonObj){
    //Returned array object
    let data = [];
    // To get Object of deadlines and know if the property exist or not
    let availableData = jsonObj.deadlines
    //Loop throw object property
    for(var objProperty in jsonObj){
        //Ignore deadlines property
        if(objProperty=="deadlines"){
            continue;
        }
        //Adding the object to the array "objPropery" will return the property name
        //"jsonObj[objProperty]" will return the value of property if it is true or flase
        //"availableData[objProperty]" will return the value if exist in availableData
        data.push({colName:objProperty,isReqGathered:jsonObj[objProperty],isWorkDone:availableData[objProperty]})
    }
    return data
}


let gridStore = Ext.create('Ext.data.Store', {
    storeId: 'gridStoreId',
    fields: ['colName', 'isReqGathered', 'isWorkDone'],
    data: dataConvert(jsonDecode)
});

Ext.create('Ext.grid.Panel', {
    title: 'Test Store Filter',
    width: 500,
    height: 400,
    renderTo: Ext.getBody(),
    store: gridStore,
    columns: [{
        dataIndex: 'colName',
        text: 'colName'
    }, {
        dataIndex: 'isReqGathered',
        text: 'isReqGathered'
    }, {
        dataIndex: 'isWorkDone',
        text: 'isWorkDone'
    }]
})