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

Question

ExtJS 5

I have a grid and it has 3 columns (Id, Students,Selected Students). In column2 (Students), I have bind static data. When i click on any item of second column then this record should be added in column3 (Selected Students) in current record or row. I have one button also called (Add new item) used for creating new row dynamically.

Note - When i add a new row by clicking on Add new item button, then new row will be added and 3 column(Selected Students) value should be blank.

I have tried so much but didn't get solution. The main problem is that when i bind data in third column then it binds proper, but when i add a new row, it also shows in new record also but it should not be. If i clear store or combo item, then it removes from all rows instead of current record/row.

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

I have tried almost everything but still i didn't get any solution. In another way - How to insert a value in grid editor combo only in current row. (Another row should not be reflected). If another row is being reflected, then how to remove value before rendering from another row without reflecting other rows.

Answer 1

Well, I guess main problem is that you trying to change certain grid row editor component while it suppose to be same for all grid rows.

The main problem is that when i bind data in third column then it binds proper, but when i add a new row, it also shows in new record also but it should not be. If i clear store or combo item, then it removes from all rows instead of current record/row.

It happens because all grid row editors use same store instance, comboStore2 , and when you change its data you change it for all editors.

To create separate store for each editor you have to do something like this:

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

But than its become not trivial to select specific row editor component and its store.

I recommend you to take a look at Ext.grid.column.Widget as you can bind certain row (its record actually) to widget with its onWidgetAttach property.

Answer 2

Your second column is dummy. You could directly use a tagfield component as the editor for your third column, which lets you select multiple values.

And you'll need a single store for the list of all students.