Question

我想从已加载的商店动态加载网格的列。我在sencha小提琴https://fiddle.sencha.com/#fiddle/lc5&view/editor中使用了类似的代码，它可以工作，但是在现代版本中，它却无法工作。因为现代版本没有reconfigure方法。我该如何解决这个问题。

Answer 1

根据您的示例，解决方案如下：

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上定义setColumns。

我从您的students.json示例文件中删除了依赖项，并将数据放入内存中以方便此处的演示。

在现代版本中，您将使用{{1}}方法。

Working Sample在小提琴上。

Answer 2

我做的另一个选择是在控制器中填充列后绑定列。

示例代码：

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

如何为Grid ExtJs动态添加列

2 个答案: