ExtJS：向网格中添加的列插入值答案

【问题标题】：ExtJS: insert value to added columns in a gridExtJS：向网格中添加的列插入值
【发布时间】：2015-07-19 00:20:39
【问题描述】：

我有一个包含 3 列 ['name', 'email', 'phone'] 的网格面板，它的模型有 5 个字段

['name', 'email', 'phone','property','value'].

我正在寻找的是根据“属性”字段中的项目数及其来自“值”字段的值动态地将列插入网格面板。

我正在使用的示例代码是here。

我的问题是我不知道如何为每一行的新列填写数据。

这是网格最终的样子。

【问题讨论】：

标签： extjs gridview extjs4 store

【解决方案1】：

有几件事要做，还有改进的余地。我不想教（或责备）你，所以这是一个基于你的小提琴的工作示例。我添加了 cmets 来指导您那里发生的事情。

{
    text: 'add column',
    handler: function() {
        // Setup the columns, including the default ones
        var newColumns = [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ];

        // Iterate through store items
        Ext.Array.each(Ext.data.StoreManager.lookup('simpsonsStore').data.items, function(storeItem) {

            // Create array from given strings in property/value fields
            var columns = storeItem.get('property') ? storeItem.get('property').split(' ').join('').split(',') : null;
            var columnValues = storeItem.get('value') ? storeItem.get('value').split(' ').join('').split(',') : null;

            // Iterate through the columns array
            for(var i = 0; i < columns.length; i++) {
                // Create new column
                var col = {
                    header: columns[i], 
                    dataIndex: columns[i]
                };

                // Check if column already added in the newColumns array
                var found = false;
                Ext.Array.each(newColumns, function(column) {
                    if (column.dataIndex == col.dataIndex)
                        found = true;
                });

                // Add column object if not found
                if (!found) {
                    newColumns.push(col);
                }

                // Edit the current store item to add the given value
                storeItem.set(columns[i], columnValues[i]);
            }
        });

        // Reconfigure columns on grid
        Ext.getCmp('gridpanel').reconfigure(Ext.data.StoreManager.lookup('simpsonsStore'), newColumns);

    }
}

结果：

【讨论】：