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.

score 3 · Answer 1 · answered Nov 16 '18 at 11:45

3

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.

answered Nov 16 '18 at 11:45

Daniel da Cunha Bueno

156
6

Thank you it work, but I want load columns from store – Andriy Yushko Nov 16 '18 at 12:40
2

You can do this in the `callback success` from `Ext.Ajax.request` call in your data source. Do the load `setColumns` with the metadata of the columns. And then load the store with the `loadData` method. – Daniel da Cunha Bueno Nov 16 '18 at 12:46
Ok I added `Ext.getCmp('surveyAnswersGrid').setColumns(meta.columns);` and it work, but raw with data not displayed. I thing need add fields for store. How can I do it? – Andriy Yushko Nov 16 '18 at 12:52
calling something lihe this `Ext.getCmp('surveyAnswersGrid').getStore().loadData(meta.data,false)` – Daniel da Cunha Bueno Nov 16 '18 at 13:00
Uncaught TypeError: Cannot read property 'length' of undefined. My data look like this: http://joxi.ru/p27BjwVTokgGdm – Andriy Yushko Nov 16 '18 at 13:12
you need find the right attribute to access data object. Try put a `debbuger;` before the ine you call `Ext.getCmp('surveyAnswersGrid').getStore().loadData(meta.data,false)` and you investigate to found solution. – Daniel da Cunha Bueno Nov 16 '18 at 13:17
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/183794/discussion-between-daniel-da-cunha-bueno-and-a-yushko). – Daniel da Cunha Bueno Nov 16 '18 at 18:25

score 2 · Answer 2 · answered Mar 26 '19 at 12:31

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

How `setUserGridColumns` method is associated with the grid. In grid defination what i have to write to get `setUserGridColumns` method. — David, Sep 12 '19 at 07:10

How to dynamically add columns for Grid ExtJs

2 Answers2

Linked