重新排列网格中的行Ext JS 4

Reordering rows within a grid Ext JS 4

本文关键字：Ext JS 网格 新排列 排列      更新时间：2023-09-26

我希望能够在单个网格中对行进行重新排序。我对extjs相对陌生，并尝试过搜索，但我找到的所有资源都是旧的extjs版本，其中定义的一些属性不再有效。例如-http://www.vinylfox.com/getting-started-with-grid-drag-drop/

    xtype: 'grid',
    id: 'row-grid',
    hideHeaders: true,
    store: 'SelectedRowStore',
    //enableDragDrop: true,
    //ddGroup: 'rowgrid-dd',
    columns: [
        {
            header: 'Rows',
            flex: 1,
            sortable: false,
            dataIndex: 'DisplayName'
        }, 
        {
            id: 'button-column',
            dataIndex: 'ID',
            sortable: true,
            hideable: false,
            width: 35,
            renderer: PA.common.RendererHelper.renderButtonForAddRowMainGrid
        }
    ]

我非常感谢在这个问题上的任何帮助/建议。

看看网格到网格的drag-n-drop示例。它适用于两个网格，但我相信它可以很容易地修改，以允许在一个网格内重新排列行。

您可以按照Rene所说的sencha样本进行操作，也可以按照以下操作：

将此添加到您的网格：

       viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                containerScroll: true,
                dragGroup: 'someuniquenameforyourgrid',
                dropGroup: 'someuniquenameforyourgrid'
            },
        },

而且，只有当你需要一些监听器来做一些修改时，才可以添加（在viewConfig中）：

       listeners: {
            drop: 'onDropGrid'
        }

和控制器中的事件处理程序代码：

   onDropGrid: function (node, data, dropRec, dropPosition) {
       ...
   }
相关文章：