如何在ExtJS5

时间:2016-01-25 08:07:18

标签: javascript extjs extjs5

ExtJS 5

我有一个网格,它有3列(Id,学生,选定的学生)。在column2(Students)中,我绑定了静态数据。当我点击第二列的任何项目时,应该在当前记录或行的第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();
            });

我已经尝试了几乎所有的东西,但我仍然没有得到任何解决方案。换句话说 - 如何仅在当前行中在网格编辑器组合中插入值。 (不应反映另一行)。如果正在反映另一行,那么如何在从另一行渲染之前删除值而不反映其他行。

2 个答案:

答案 0 :(得分:0)

好吧,我猜主要的问题是你试图改变某些网格行编辑器组件,而它假设所有网格行都是相同的。

  

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

这是因为所有网格行编辑器都使用相同的商店实例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属性的窗口小部件。

答案 1 :(得分:0)

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

您需要一个商店才能获得所有学生的名单。