How to dynamically add columns for Grid ExtJs

Question

I want dynamically load columns for grid from loaded store. I used code like in sencha fiddle https://fiddle.sencha.com/#fiddle/lc5&view/editor, it work, but in modern version it dose not work. Because modern version not have reconfigure method. How can I solve that problem.

Answer 1

Based on your example, the solution is as follows:

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

the most important

You must define a column on the grid columns, even though it will be changed at a future time on your grid.

I removed the dependency from your students.json sample file and put the data into an in-memory store to facilitate the demonstration here.

In modern version, you will use setColumns method.

Working Sample on fiddle.

Answer 2

Another option I did is to bind the columns after populating them in the controller.

Sample code:

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

In the controller I populated the columns this way:

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);
}