ExtJs双击网格行应该将项目移动到另一个网格

时间:2015-08-19 19:46:07

标签: javascript extjs

我有两个网格,我想通过双击第一个网格将项目从网格移动到另一个网格。我在第一个网格中添加了一个监听器,并且无法在第二个网格中显示所选项目

                Ext.define('SessionGridPanel', {
                extend: 'Ext.grid.Panel',
                alias: 'widget.sessiongridpanel',
                listeners: {
                    itemdblclick: function (gridpanel, record, item, e) {

                        var selectedForm = Ext.create('SelectedPanel');                            
                        selectedForm.getStore.add(record);
                        //selectedForm.getStore().insert(0, [record]);
                        //selectedForm.getView().getStore().insert(0, record);
                    }

下面是我的第二个网格

                Ext.define('SelectedPanel', {
                xtype: 'grid',
                itemId: 'myGrid',
                id: 'myIdGrid',
                extend: 'Ext.grid.Panel',
                alias: 'widget.selectedformpanel',
                store: {
                    fields: [
                        { name: 'id', type: 'int' },
                        { name: 'title', type: 'string' },
                        { name: 'approved', type: 'bool' }
                    ]
                },
                selModel: sm,
                columns: [
                    {
                        text: 'Id',
                        xtype: 'gridcolumn',
                        sortable: true,
                        dataIndex: 'id'
                    },
                    {
                        text: 'Title',
                        xtype: 'gridcolumn',
                        sortable: true,
                        dataIndex: 'title'
                    },
                    {
                        text: 'Approved',
                        xtype: 'gridcolumn',
                        sortable: true,
                        dataIndex: 'approved'
                    }
                ],
                dockedItems: [{
                    xtype: 'container',
                    cls: 'eformscontainerbutton',
                    dock: 'top',
                    items: [{
                        xtype: 'button',
                        id: 'moveUp',
                        action: 'moveUp',
                        margin: '4 10 4 0',
                        cls: 'sagitta-deluxe-button',
                        width: 105,
                        tooltip: 'Move Up',
                        text: 'Move Up'
                    },
                        {
                            xtype: 'button',
                            id: 'moveDown',
                            action: 'moveDown',
                            tooltip: 'Move Down',
                            margin: '4 0 4 10',
                            cls: 'sagitta-deluxe-button',
                            width: 105,
                            text: 'Move Down'
                        }
                    ]
                },
                {
                    // container for the action buttons GENERATE FORMS, VIEW, and CLEAR
                    xtype: 'container',
                    cls: 'eformscontainerbutton',
                    margin: '2 0 2 0',
                    dock: 'bottom',
                    items: [

                        {
                            xtype: 'button',
                            id: 'clear',
                            action: 'clearAll',
                            tooltip: 'Clear all selections',
                            margin: '4 3 0 10',
                            cls: 'sagitta-deluxe-button',
                            width: 105,
                            text: 'Clear'
                        }]
                }]

            });

我尝试谷歌,但无法获得任何与双击有关的事情,我尝试使用store.add和store.insert按钮点击相同的方式,但这也不起作用。

2 个答案:

答案 0 :(得分:2)

我在sencha小提琴中为你做了一个小例子:https://fiddle.sencha.com/#fiddle/sg1

使用共享模型构建两个商店。使用add / remove:

将itemdblclick侦听器添加到网格中
listeners: {
    itemdblclick: function(grid, record) {
        store2.add(record);
        store1.remove(record);
     }
}

答案 1 :(得分:-1)

itemdblClick中,试试这个:

itemDblClick: function() {
    var store =   gridpanel.getStore(); // this is store from where record will remove
    store.remove(record);
    var store1 = Ext.ComponentQuery.query('grid').getStore(); //  you can use any way to get other grid store.
    store1.add(record); // it will add record in last index of other grid
}