ExtJS: преобразование столбцов модели в строки в сетке - PullRequest
Новая
       34

ExtJS: преобразование столбцов модели в строки в сетке

0 голосов
/ 11 февраля 2019

Я очень плохо знаком с ExtJS и хотел добиться следующего:

У меня есть модель с данными примерно так: 

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

Нет нескольких строк.Только одна строка вернулась из базы данных.

Я хочу отобразить данные в сетке с тремя столбцами. Столбец 1: имя столбца Столбец 2: флажок, показывающий, является ли значение истинным или ложным Столбец 3: Aфлажок, который показывает, присутствует ли имя столбца в «крайних сроках» или нет

Например:

Account_Enabled True True

Requirements_Garded True False

work_done False Undefined (Флажок должен быть отключен)

По сути, мне нужно преобразовать эту строку в три столбца.Кроме того, мне нужно обновить магазин, когда пользователь устанавливает / снимает флажки

Могу ли я узнать, есть ли способ добиться этого с помощью сеток ExtJS?или есть идея получше?

Заранее спасибо

1 Ответ

0 голосов
/ 11 февраля 2019

Нет прямого способа привязать ваш ответ json в формате, который вы упомянули, к хранилищу сетки.

Что вам нужно сделать, это манипулировать ответом, требуя столбцы таблицы соответствия.

Проверьте этот рабочий пример 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'
    }]
})
...