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

Question

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

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

我正在寻找的是根据 'property' 字段中的项目数及其在 'value' 字段中的值动态地将列插入网格面板。

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

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

网格最终应该是这样的。

Answer 1

有几件事要做，还有改进的余地。我不想教（或责怪）你，所以这是一个基于你的 fiddle 的工作示例。我添加了评论来指导你那里发生了什么。

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

    }
}

结果：

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

ExtJS: insert value to added columns in a grid

gridview

extjs

store

extjs4