Как динамически добавлять столбцы для Grid ExtJs - PullRequest
Новая
       17

Как динамически добавлять столбцы для Grid ExtJs

0 голосов
/ 16 ноября 2018

Я хочу динамически загружать столбцы для сетки из загруженного магазина. Я использовал код как в Sencha Fiddle https://fiddle.sencha.com/#fiddle/lc5&view/editor,, он работает, но в современной версии он не работает. Потому что современная версия не имеет reconfigure метода. Как я могу решить эту проблему.

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

Другой вариант, который я сделал, - связать столбцы после заполнения их в контроллере.

Пример кода: 

{
     xtype: 'gridpanel',
     id: 'user-grid',
     cls: 'user-grid',
     width: '100%',
     scrollable: false,
     bind: {
          store: '{userStore}',
          columns: '{columns}'
     }
}

В контроллере я заполнил столбцытаким образом: 

setUserGridColumns: function () {
    var fields = ['title', 'Surname', 'Profession', 'Age', 'randomValue'];// this can come from server
    var columns = [];
    fields.forEach(element => {
        var column = {
            xtype: 'gridcolumn',
            cls: 'content-column',
            dataIndex: element,
            text: element,
            flex: 1,
            sortable: false,
            align: 'center',
            style: 'border-width:0px !important; margin-bottom:15px'
        }
        columns.push(column);
    });
    this.getViewModel().set('columns', columns);
}
0 голосов
/ 16 ноября 2018

Исходя из вашего примера, решение выглядит следующим образом: 

var grid = Ext.create({
    xtype: 'grid',
    fullscreen: true,
    minHeight: 150,
    renderTo: document.body,
    plugins: {
        gridsummaryrow: true
    },
    store: {
        fields: ['student', 'mark'],
        idProperty: 'student',
        data: [{
            "student": 'Student 1',
            "mark": 84
        }, {
            "student": 'Student 2',
            "mark": 72
        }, {
            "student": 'Student 3',
            "mark": 96
        }, {
            "student": 'Student 4',
            "mark": 68
        }],
        proxy: {
            type: 'memory'
        }
    },
    columns: [{
        dataIndex: 'student',
        text: 'Name'
    }]
});

grid.getStore().load();

grid.setColumns([{
    width: 200,
    dataIndex: 'student',
    text: 'Name',
    summaryType: 'count',
    summaryRenderer: function(value){
        return Ext.String.format('Number of students: {0}', value);
    }
}, {
    "dataIndex": 'mark',
    "text": 'Mark',
    "summaryType": 'average'
}]);

самое важное

Вы должны определить column в сетке columns, даже если она будет изменена в будущем в вашей сетке.

Я удалил зависимость из вашего файла примера student.json и поместил данные в хранилище в памяти, чтобы облегчить демонстрацию.

В современной версии вы будете использовать setColumns метод.

Рабочий образец на скрипке.

...