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

Posted 2023-03-16

【中文标题】ExtJS：向网格中添加的列插入值

【英文标题】：ExtJS: insert value to added columns in a grid

【发布时间】：2015-07-19 00:20:39

【问题描述】：

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

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

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

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

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

这是网格最终的样子。

【参考方案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);

    

结果：