ExtJS: Converting model columns to rows in a grid

Question

I'm very new to ExtJS and wanted to achieve the following:

I have a model with data something like this:

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

There are no multiple rows. Only a single row returned from the database.

I want to display the data in a grid with three columns Column1: The name of the column Column2: A checkbox that shows whether the value is true or false Column3: A checkbox that shows whether the column name present in "deadlines" or not

Ex:

Account_Enabled True True

Requirements_Gathered True False

work_done False Undefined(Checkbox need to be disabled)

Basically, i need to convert that single row into three columns. Also, i need to the update the store when the user checks/uncheks the checkboxes

May i know if there is any way to achieve this via ExtJS grids? or is there any better idea?

Thanks in advance

Moataz Sanad Moataz Sanad · Accepted Answer · 2019-02-11T17:13:35

There is no direct way to bind your json response in the format you mention to the grid store.

What you need to do is to manipulate the response the match grid columns required.

Check this working example ExtJs Fiddle

//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'
    }]
})

ExtJS: Converting model columns to rows in a grid

1 Answers