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

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

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

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

Нет нескольких рядов. Из базы данных возвращена только одна строка.

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

Бывший:

Account_Enabled Истинно Истинно

Требования_Собраны Верно Ложно

work_done False Undefined (необходимо снять флажок)

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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
510
1

Ответы 1

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

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

Проверьте этот рабочий пример Скрипт ExtJs

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

Большое спасибо за ответ :) . это действительно полезно. Отображение данных, возвращаемых из хранилища, работает. Но как мне обновить базу данных, если кто-то редактирует любую ячейку? Какие-либо предложения?

aditya uppuluri 12.02.2019 13:15

ну, для серверной части у вас должен быть компонент с 3 свойствами colName, isReqGathered, isWorkDone, чтобы вы могли отправлять эти значения из внешнего интерфейса в серверную часть, и если у вас есть эти данные в серверной части, вы можете написать там свое решение. Итак, вам нужны манипуляции с данными со стороны сервера.

Moataz Sanad 12.02.2019 13:54

Привет @moataz Sanad: Бэкенд не хотел менять схему/логику. Поэтому я обхожу это следующим образом: в событии checkchange я форматирую модель и вызываю уведомление о модели представления, которое, в свою очередь, отправляет данные обратно на сервер <!-- язык: lang-js --> var property = 'data .deadlines.Accounts_enabled' page.getViewModel().set(свойство, проверено)

aditya uppuluri 13.02.2019 20:06

Другие вопросы по теме