如何在 ExtJS 5 中的网格编辑器组合框的当前记录中添加项目

Posted 2023-02-26

【中文标题】如何在 ExtJS 5 中的网格编辑器组合框的当前记录中添加项目

【英文标题】：How to add a item in current record of grid editor combo in ExtJS5

【发布时间】：2016-01-25 08:07:17

【问题描述】：

ExtJS 5

我有一个网格，它有 3 列（Id、Students、Selected Students）。在 column2（学生）中，我绑定了静态数据。当我单击第二列的任何项目时，应将此记录添加到当前记录或行的第 3 列（选定的学生）中。我有一个也称为（添加新项目）的按钮，用于动态创建新行。

注意 - 当我通过单击添加新项目按钮添加新行时，将添加新行并且 3 列（选定的学生）值应为空白。

我尝试了很多，但没有得到解决方案。主要问题是，当我在第三列中绑定数据时，它会正确绑定，但是当我添加新行时，它也会显示在新记录中，但它不应该是。如果我清除存储或组合项，则它会从所有行而不是当前记录/行中删除。

Ext.onReady(function () 

                var comboStore1 = Ext.create('Ext.data.Store',
                    
                        fields: ['text', 'id'],
                        data:
                        [
                             "text": "Value1", "id" :1 ,
                             "text": "Value2", "id": 2 ,
                             "text": "Value3", "id": 3 
                        ]
                    );

                var comboStore2 = Ext.create('Ext.data.Store',
                    
                        fields: ['text', 'id']
                    );

                var gridStore = Ext.create('Ext.data.Store',
                    
                        fields: ['id', 'students', 'selectedStudents'],
                        data:
                        [
                             "id" : 1,
                        ]
                    );               

                var window = new Ext.Window(
                    id: 'grdWindow',
                    width: 400,
                    height: 200,
                    items: [
                        
                            xtype: 'panel',
                            layout: 'fit',
                            renderTo: Ext.getBody(),
                            items: [
                                
                                    xtype: 'button',
                                    text: 'Add New Item',
                                    handler: function () 
                                        var store = Ext.getCmp('grdSample').store;

                                        var rec = 
                                            id: 1,
                                            students: '',
                                            selectedStudents: ''
                                        
                                        store.insert(store.length + 1, rec);
                                    
                                ,
                                
                                    xtype: 'grid',
                                    id: 'grdSample',
                                    store: gridStore,
                                    plugins: [
                                            Ext.create('Ext.grid.plugin.CellEditing', 
                                                clicksToEdit: 1
                                            )
                                            ],
                                    columns: [
                                        
                                            header: 'id',
                                            dataIndex: 'id'
                                        ,
                                        
                                            header: 'Students',
                                            dataIndex: 'students',
                                            editor: 
                                                xtype: 'combobox',
                                                store: comboStore1,
                                                displayField: 'text',
                                                valueField: 'text',
                                                queryMode: 'local',
                                                listeners: 
                                                    select: function (combo, records) 
                                                        var rec = records[0].data;
                                                    
                                                
                                            
                                        ,
                                        
                                            header: 'Selected Students',
                                            dataIndex: 'selectedStudents',
                                            editor: 
                                                xtype: 'combobox',
                                                id: 'combo2',
                                                store: comboStore2,
                                                displayField: 'text',
                                                valueField: 'id'
                                            
                                        
                                    ]
                                
                            ]
                        ]
                ).show();
            );

我几乎尝试了所有方法，但仍然没有得到任何解决方案。以另一种方式 - 如何在网格编辑器组合中仅在当前行中插入值。 （不应反映另一行）。如果正在反射另一行，那么如何在从另一行渲染之前删除值而不反射其他行。

【参考方案1】：

好吧，我想主要问题是您试图更改某些网格行编辑器组件，而它假设所有网格行都相同。

主要问题是，当我在第三列中绑定数据时，它会正确绑定，但是当我添加新行时，它也会显示在新记录中，但它不应该是。如果我清除存储或组合项，则它会从所有行而不是当前记录/行中删除。

这是因为所有网格行编辑器都使用相同的存储实例 comboStore2，并且当您更改其数据时，您会为所有编辑器更改它。

要为每个编辑器创建单独的商店，您必须执行以下操作：

    header: 'Selected Students',
    dataIndex: 'selectedStudents',
    editor: 
        xtype: 'combobox',
        id: 'combo2',
        store: Ext.create('Ext.data.Store', 
                fields: ['text', 'id']
        ),
        displayField: 'text',
        valueField: 'id'
    

但是选择特定的行编辑器组件及其存储变得不简单。

我建议您查看Ext.grid.column.Widget，因为您可以使用其onWidgetAttach 属性将某些行（实际上是它的记录）绑定到小部件。

【讨论】：

您好，感谢您的回答。如果我在编辑器中创建一个商店，它仍然不能按照您的指定工作。检查您提供的链接后，我会回复您。

嗨，谢尔盖 - 我检查了链接，但还没有得到解决方案。

【参考方案2】：

您的第二列是虚拟的。 您可以直接使用tagfield 组件作为第三列的编辑器，这样您就可以选择多个值。

您需要一个存储所有学生的列表。

【讨论】：

你好 Bhates - 我想，你没有得到我的问题。请再读一遍或给我完整的例子。