@nocobase/client-v2 2.1.0-alpha.30 → 2.1.0-alpha.31

package/src/flow/models/actions/__tests__/AssociationActionModel.test.ts

@@ -0,0 +1,250 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { BaseRecordResource, FlowEngine } from '@nocobase/flow-engine';
+import {
+  applyDisassociateAction,
+  ActionModel,
+  applyAssociateAction,
+  AssociateActionModel,
+  CollectionActionGroupModel,
+  DisassociateActionModel,
+  getAssociationTargetResourceSettings,
+  PopupActionModel,
+  RecordActionGroupModel,
+} from '../../..';
+
+class TestAssociationResource<T = any> extends BaseRecordResource<T> {
+  async refresh(): Promise<void> {}
+}
+
+const createEngine = () => {
+  const engine = new FlowEngine();
+  engine.registerModels({
+    ActionModel,
+    AssociateActionModel,
+    DisassociateActionModel,
+    PopupActionModel,
+    CollectionActionGroupModel,
+    RecordActionGroupModel,
+  });
+  return engine;
+};
+
+const createContext = (engine: FlowEngine, resourceSettingsInit: any) => {
+  const collection = {
+    options: {
+      availableActions: ['list', 'update'],
+    },
+    getFilterByTK: vi.fn((record) => record.id),
+  };
+  return {
+    engine,
+    collection,
+    blockModel: {
+      collection,
+      getResourceSettingsInitParams: () => resourceSettingsInit,
+    },
+  } as any;
+};
+
+describe('association action models', () => {
+  it('uses update permission for association operations', () => {
+    expect(AssociateActionModel.prototype.getAclActionName.call({})).toBe('update');
+    expect(DisassociateActionModel.prototype.getAclActionName.call({})).toBe('update');
+    expect(AssociateActionModel.capabilityActionName).toBe('update');
+    expect(DisassociateActionModel.capabilityActionName).toBe('update');
+  });
+
+  it('uses association target collection for selector table blocks', () => {
+    const ctx: any = {
+      blockModel: {
+        association: {
+          target: 'transports',
+          targetCollection: {
+            name: 'transports',
+            dataSourceKey: 'main',
+          },
+        },
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.transports',
+        }),
+      },
+    };
+
+    expect(getAssociationTargetResourceSettings(ctx)).toEqual({
+      dataSourceKey: 'main',
+      collectionName: 'transports',
+    });
+  });
+
+  it('shows Associate only in collection actions of association blocks', async () => {
+    const engine = createEngine();
+
+    const relationItems = await CollectionActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+        associationName: 'products.o2m_orders',
+      }),
+    );
+    const normalItems = await CollectionActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+      }),
+    );
+
+    expect(relationItems.map((item: any) => item.useModel)).toContain('AssociateActionModel');
+    expect(relationItems.map((item: any) => item.useModel)).not.toContain('DisassociateActionModel');
+    expect(normalItems.map((item: any) => item.useModel)).not.toContain('AssociateActionModel');
+  });
+
+  it('shows Disassociate only in record actions of association blocks', async () => {
+    const engine = createEngine();
+
+    const relationItems = await RecordActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+        associationName: 'products.o2m_orders',
+      }),
+    );
+    const normalItems = await RecordActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+      }),
+    );
+
+    expect(relationItems.map((item: any) => item.useModel)).toContain('DisassociateActionModel');
+    expect(relationItems.map((item: any) => item.useModel)).not.toContain('AssociateActionModel');
+    expect(normalItems.map((item: any) => item.useModel)).not.toContain('DisassociateActionModel');
+  });
+
+  it('disassociates the current record through association resource remove action', async () => {
+    const resource = {
+      runAction: vi.fn(async () => ({})),
+      refresh: vi.fn(async () => {}),
+    };
+    const collection = {
+      getFilterByTK: vi.fn(() => 12),
+    };
+    const ctx: any = {
+      blockModel: {
+        collection,
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+        }),
+      },
+      record: {
+        id: 12,
+      },
+      message: {
+        success: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyDisassociateAction(ctx);
+
+    expect(collection.getFilterByTK).toHaveBeenCalledWith(ctx.record);
+    expect(resource.runAction).toHaveBeenCalledWith('remove', {
+      data: [12],
+    });
+    expect(resource.refresh).toHaveBeenCalled();
+    expect(ctx.message.success).toHaveBeenCalledWith('Record disassociated successfully');
+  });
+
+  it('associates selected records through association resource add action', async () => {
+    const resource = {
+      runAction: vi.fn(async () => ({})),
+      refresh: vi.fn(async () => {}),
+    };
+    const collection = {
+      getFilterByTK: vi.fn((record) => record.id),
+    };
+    const ctx: any = {
+      blockModel: {
+        collection,
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+        }),
+      },
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyAssociateAction(ctx, [{ id: 11 }, { id: 12 }]);
+
+    expect(collection.getFilterByTK).toHaveBeenCalledWith({ id: 11 });
+    expect(collection.getFilterByTK).toHaveBeenCalledWith({ id: 12 });
+    expect(resource.runAction).toHaveBeenCalledWith('add', {
+      data: [11, 12],
+    });
+    expect(resource.refresh).toHaveBeenCalled();
+    expect(ctx.message.success).toHaveBeenCalledWith('Record associated successfully');
+  });
+
+  it('uses nested association resource url when adding associated records', async () => {
+    const engine = createEngine();
+    const resource = engine.createResource(TestAssociationResource);
+    const api = {
+      request: vi.fn().mockResolvedValue({ data: { data: {} } }),
+    };
+    resource.setAPIClient(api as any);
+    resource.setResourceName('products.o2m_orders');
+    resource.setSourceId('362872646860800');
+
+    const ctx: any = {
+      blockModel: {
+        collection: {
+          getFilterByTK: vi.fn((record) => record.id),
+        },
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+          sourceId: '362872646860800',
+        }),
+      },
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyAssociateAction(ctx, [{ id: 11 }]);
+
+    expect(api.request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        method: 'post',
+        url: 'products/362872646860800/o2m_orders:add',
+        data: [11],
+      }),
+    );
+  });
+});

package/src/flow/models/actions/index.ts

@@ -8,8 +8,11 @@
  */
 
 export * from './AddNewActionModel';
+export * from './AssociateActionModel';
+export * from './AssociationActionUtils';
 export * from './BulkDeleteActionModel';
 export * from './DeleteActionModel';
+export * from './DisassociateActionModel';
 export * from './EditActionModel';
 export * from './FilterActionModel';
 export * from './JSActionModel';

package/src/flow/models/base/GridModel.tsx

@@ -118,6 +118,14 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
   private dragState?: DragState;
   private _memoItemFlowSettings?: Exclude<FlowModelRendererProps['showFlowSettings'], boolean>;
 
+  onInit(options) {
+    super.onInit(options);
+    // 历史数据里可能残留拖拽高亮框，初始化时立即清理，避免刷新页面后常驻显示。
+    if (this.props.dragOverlayRect) {
+      this.setProps('dragOverlayRect', null);
+    }
+  }
+
   private updateDragPointerPosition = (event: Event) => {
     if (!this.dragState) {
       return;
@@ -243,6 +251,12 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     return this.normalizeLayoutFromSource();
   }
 
+  serialize(): Record<string, any> {
+    const data = super.serialize();
+    data.props = _.omit(data.props, ['dragOverlayRect']);
+    return data;
+  }
+
   syncLayoutProps(layout: GridLayoutV2) {
     const projection = projectLayoutToLegacyRows(layout);
     this.setProps('layout', layout);
@@ -801,11 +815,17 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     this.setProps('dragOverlayRect', null);
   }
 
-  handleDragEnd(_event: DragEndEvent) {
+  handleDragEnd(event: DragEndEvent) {
     if (!this.dragState) {
       return;
     }
 
+    const finalPoint = this.computePointerPosition(event);
+    if (finalPoint) {
+      const finalSlot = this.resolveDragSlot(finalPoint);
+      this.applyPreview(finalSlot);
+    }
+
     const previewLayout = this.dragState.previewLayout;
     if (previewLayout) {
       if (previewLayout.layout) {

package/src/flow/models/base/__tests__/GridModel.dragSnapshotContainer.test.ts

@@ -283,4 +283,102 @@ describe('GridModel drag snapshot container', () => {
       type: 'column',
     });
   });
+
+  it('clears persisted drag overlay on init', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-hidden-stale-overlay',
+      props: {
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    expect(model.props.dragOverlayRect).toBeNull();
+  });
+
+  it('omits drag overlay rect from serialized props', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-serialize-overlay',
+      props: {
+        rowGap: 24,
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    const serialized = model.serialize();
+
+    expect(serialized.props).toMatchObject({ rowGap: 24 });
+    expect(serialized.props).not.toHaveProperty('dragOverlayRect');
+  });
+
+  it('recomputes the final slot from drag end position before saving layout', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-final-slot',
+      props: {},
+      structure: {} as any,
+    });
+    const applyPreview = vi.fn((slot) => {
+      (model as any).dragState.previewLayout = slot
+        ? {
+            rows: { 'row-final': [['item-1']] },
+            sizes: { 'row-final': [24] },
+          }
+        : undefined;
+    });
+    const resolveDragSlot = vi.fn(() => ({
+      type: 'row-gap',
+      targetRowId: 'row-final',
+      position: 'below',
+      rect: { top: 200, left: 20, width: 440, height: 32 },
+    }));
+    const saveGridLayout = vi.fn();
+    const syncLayoutProps = vi.fn();
+    const finishDrag = vi.fn();
+
+    (model as any).applyPreview = applyPreview;
+    (model as any).resolveDragSlot = resolveDragSlot;
+    (model as any).saveGridLayout = saveGridLayout;
+    (model as any).syncLayoutProps = syncLayoutProps;
+    (model as any).finishDrag = finishDrag;
+    (model as any).dragState = {
+      sourceUid: 'item-1',
+      snapshot: { rows: {}, sizes: {} },
+      slots: [],
+      containerEl: null,
+      containerRect: { top: 0, left: 0, width: 0, height: 0 },
+      pointerOrigin: { x: 100, y: 100 },
+      activeSlotKey: null,
+      previewLayout: undefined,
+      refreshTimer: null,
+      generatedIds: new Map(),
+    };
+
+    model.handleDragEnd({
+      delta: { x: 30, y: 220 },
+    } as any);
+
+    expect(resolveDragSlot).toHaveBeenCalledWith({ x: 130, y: 320 });
+    expect(applyPreview).toHaveBeenCalledOnce();
+    expect(saveGridLayout).toHaveBeenCalledWith({
+      rows: { 'row-final': [['item-1']] },
+      sizes: { 'row-final': [24] },
+    });
+    expect(finishDrag).toHaveBeenCalledOnce();
+  });
 });

package/src/flow/models/blocks/details/DetailsItemModel.tsx

@@ -379,6 +379,9 @@ DetailsItemModel.registerFlow({
   steps: {
     aclCheckRefresh: {
       use: 'aclCheckRefresh',
+      defaultParams: {
+        strategy: 'formItem',
+      },
     },
   },
 });

package/src/flow/models/blocks/filter-form/FilterFormGridModel.tsx

@@ -12,7 +12,10 @@ import {
   AddSubModelButton,
   DragOverlayConfig,
   FlowSettingsButton,
+  GridCellV2,
+  GridLayoutData,
   GridLayoutV2,
+  GridRowV2,
   normalizeGridLayout,
   observable,
   projectLayoutToLegacyRows,
@@ -24,6 +27,8 @@ import { FilterFormItemModel } from './FilterFormItemModel';
 
 export class FilterFormGridModel extends GridModel {
   private fullLayoutBeforeCollapse?: GridLayoutV2;
+  private normalizedItemUidsOverride?: string[];
+  private readingFullLayoutForSettingsInteraction = false;
   itemSettingsMenuLevel = 2;
   itemFlowSettings = {
     showBackground: true,
@@ -64,6 +69,182 @@ export class FilterFormGridModel extends GridModel {
     return filterTargetKey || 'id';
   }
 
+  private normalizeFilterFormLayout(
+    source?: Partial<GridLayoutData>,
+    options?: {
+      useVisibleItemUids?: boolean;
+    },
+  ): GridLayoutV2 {
+    const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
+    const useVisibleItemUids = options?.useVisibleItemUids !== false;
+
+    return normalizeGridLayout({
+      layout: source?.layout ?? this.props.layout ?? params.layout,
+      rows: source?.rows ?? this.props.rows ?? params.rows,
+      sizes: source?.sizes ?? this.props.sizes ?? params.sizes,
+      rowOrder: source?.rowOrder ?? this.props.rowOrder ?? params.rowOrder,
+      // 折叠态只保留当前可见字段，避免归一化时把被裁掉的字段重新补回布局。
+      itemUids: useVisibleItemUids ? this.normalizedItemUidsOverride ?? this.getItemUids() : this.getItemUids(),
+      gridUid: this.uid,
+      logger: console,
+    });
+  }
+
+  private normalizeStoredFullLayout(): GridLayoutV2 {
+    const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
+
+    return normalizeGridLayout({
+      layout: this.fullLayoutBeforeCollapse ?? params.layout ?? this.props.layout,
+      rows: params.rows ?? this.props.rows,
+      sizes: params.sizes ?? this.props.sizes,
+      rowOrder: params.rowOrder ?? this.props.rowOrder,
+      itemUids: this.getItemUids(),
+      gridUid: this.uid,
+      logger: console,
+    });
+  }
+
+  protected override normalizeLayoutFromSource(source?: Partial<GridLayoutData>): GridLayoutV2 {
+    // 只有运行时读取当前展示布局时才应用折叠态可见字段覆盖；
+    // 带 source 的路径通常用于重算/持久化布局，必须始终基于完整字段集。
+    if (!source && this.readingFullLayoutForSettingsInteraction) {
+      return this.normalizeStoredFullLayout();
+    }
+
+    return this.normalizeFilterFormLayout(source, {
+      useVisibleItemUids: !source && !this.readingFullLayoutForSettingsInteraction,
+    });
+  }
+
+  getGridLayout(): GridLayoutV2 {
+    if (this.context.flowSettingsEnabled && this.normalizedItemUidsOverride) {
+      return this.normalizeStoredFullLayout();
+    }
+
+    return super.getGridLayout();
+  }
+
+  saveGridLayout(layout?: GridLayoutData | GridLayoutV2) {
+    super.saveGridLayout(layout);
+
+    if (this.context.flowSettingsEnabled && this.normalizedItemUidsOverride) {
+      const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
+      this.fullLayoutBeforeCollapse = normalizeGridLayout({
+        layout: params.layout ?? this.props.layout,
+        rows: params.rows ?? this.props.rows,
+        sizes: params.sizes ?? this.props.sizes,
+        rowOrder: params.rowOrder ?? this.props.rowOrder,
+        itemUids: this.getItemUids(),
+        gridUid: this.uid,
+        logger: console,
+      });
+    }
+  }
+
+  handleDragStart(event: Parameters<GridModel['handleDragStart']>[0]) {
+    this.readingFullLayoutForSettingsInteraction = Boolean(
+      this.context.flowSettingsEnabled && this.normalizedItemUidsOverride,
+    );
+    try {
+      super.handleDragStart(event);
+    } finally {
+      this.readingFullLayoutForSettingsInteraction = false;
+    }
+  }
+
+  private collectLayoutItemUids(rows: GridLayoutV2['rows']) {
+    const itemUids = new Set<string>();
+
+    const visitRows = (currentRows: GridLayoutV2['rows']) => {
+      currentRows.forEach((row) => {
+        row.cells.forEach((cell) => {
+          cell.items?.forEach((uid) => {
+            if (uid && this.flowEngine.getModel(uid)) {
+              itemUids.add(uid);
+            }
+          });
+
+          if (cell.rows?.length) {
+            visitRows(cell.rows);
+          }
+        });
+      });
+    };
+
+    visitRows(rows);
+
+    return Array.from(itemUids);
+  }
+
+  private getCellVisibleRowCount(cell: GridCellV2): number {
+    if (cell.rows?.length) {
+      return cell.rows.reduce((count, row) => count + this.getRowVisibleRowCount(row), 0);
+    }
+
+    return cell.items?.length || 0;
+  }
+
+  private getRowVisibleRowCount(row: GridRowV2): number {
+    return row.cells.reduce((count, cell) => Math.max(count, this.getCellVisibleRowCount(cell)), 0);
+  }
+
+  private limitCellByVisibleCount(cell: GridCellV2, visibleRows: number): GridCellV2 | null {
+    if (visibleRows <= 0) {
+      return null;
+    }
+
+    if (cell.rows?.length) {
+      const rows = this.limitLayoutRowsByVisibleCount(cell.rows, visibleRows);
+      return rows.length ? { id: cell.id, rows } : null;
+    }
+
+    if (cell.items) {
+      const items = cell.items.slice(0, visibleRows);
+      return items.length ? { id: cell.id, items } : null;
+    }
+
+    return null;
+  }
+
+  private limitRowByVisibleCount(row: GridRowV2, visibleRows: number): GridRowV2 | null {
+    const cellsWithSizes = row.cells
+      .map((cell, index) => {
+        const limitedCell = this.limitCellByVisibleCount(cell, visibleRows);
+        return limitedCell ? { cell: limitedCell, size: row.sizes?.[index] } : null;
+      })
+      .filter(Boolean) as { cell: GridCellV2; size?: number }[];
+
+    if (!cellsWithSizes.length) {
+      return null;
+    }
+
+    return {
+      id: row.id,
+      cells: cellsWithSizes.map((entry) => entry.cell),
+      sizes: cellsWithSizes.map((entry) => entry.size ?? 1),
+    };
+  }
+
+  private limitLayoutRowsByVisibleCount(rows: GridLayoutV2['rows'], visibleRows: number): GridLayoutV2['rows'] {
+    const limitedRows: GridLayoutV2['rows'] = [];
+    let remainingRows = visibleRows;
+
+    rows.forEach((row) => {
+      if (remainingRows <= 0) {
+        return;
+      }
+
+      const rowHeight = this.getRowVisibleRowCount(row);
+      const limitedRow = this.limitRowByVisibleCount(row, Math.min(rowHeight, remainingRows));
+      if (limitedRow) {
+        limitedRows.push(limitedRow);
+        remainingRows -= Math.min(rowHeight, remainingRows);
+      }
+    });
+
+    return limitedRows;
+  }
+
   /**
    * 获取筛选表单当前“完整布局”。
    * 折叠态会临时裁剪 props.rows，因此这里优先选取行数更多的那份布局，
@@ -71,8 +252,12 @@ export class FilterFormGridModel extends GridModel {
    */
   private getFullLayout() {
     const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
-    const currentLayout = this.props.layout ? this.getGridLayout() : undefined;
-    const savedLayout = params.layout ? this.normalizeLayoutFromSource(params) : undefined;
+    const currentLayout = this.props.layout
+      ? this.normalizeFilterFormLayout(undefined, { useVisibleItemUids: false })
+      : undefined;
+    const savedLayout = params.layout
+      ? this.normalizeFilterFormLayout(params, { useVisibleItemUids: false })
+      : undefined;
     const currentProjection = currentLayout
       ? projectLayoutToLegacyRows(currentLayout)
       : { rows: this.props.rows || {}, rowOrder: this.props.rowOrder };
@@ -103,41 +288,11 @@ export class FilterFormGridModel extends GridModel {
     };
   }
 
-  /**
-   * 按“可视字段行数”裁剪布局，而不是只按 grid row 数裁剪。
-   * 这样即使拖拽后多个字段被排进同一个 cell，也仍然可以正确折叠。
-   */
-  private limitRowsByVisibleCount(
-    rows: Record<string, string[][]>,
-    rowOrder: string[],
-    visibleRows: number,
-  ): Record<string, string[][]> {
-    const limitedRows: Record<string, string[][]> = {};
-    let remainingRows = visibleRows;
-
-    rowOrder.forEach((rowKey) => {
-      if (remainingRows <= 0 || !rows[rowKey]) {
-        return;
-      }
-
-      const cells = rows[rowKey];
-      const rowHeight = cells.reduce((max, cell) => Math.max(max, cell.length), 0);
-      const visibleCount = Math.min(rowHeight, remainingRows);
-      const nextCells = cells.map((cell) => cell.slice(0, visibleCount));
-
-      if (nextCells.some((cell) => cell.length > 0)) {
-        limitedRows[rowKey] = nextCells;
-        remainingRows -= visibleCount;
-      }
-    });
-
-    return limitedRows;
-  }
-
   toggleFormFieldsCollapse(collapse: boolean, visibleRows: number) {
     const { rows: fullRows, rowOrder, layout } = this.getFullLayout();
 
     if (!collapse) {
+      this.normalizedItemUidsOverride = undefined;
       const restoredLayout = this.fullLayoutBeforeCollapse || layout;
       if (restoredLayout) {
         this.syncLayoutProps(restoredLayout);
@@ -159,12 +314,21 @@ export class FilterFormGridModel extends GridModel {
         });
     }
 
-    const limitedRows = this.limitRowsByVisibleCount(fullRows, rowOrder, visibleRows);
+    const fullLayout =
+      layout ||
+      normalizeGridLayout({
+        rows: fullRows,
+        rowOrder,
+        itemUids: this.getItemUids(),
+      });
     const limitedLayout = normalizeGridLayout({
-      rows: limitedRows,
-      rowOrder,
+      layout: {
+        version: 2,
+        rows: this.limitLayoutRowsByVisibleCount(fullLayout.rows, visibleRows),
+      },
     });
 
+    this.normalizedItemUidsOverride = this.collectLayoutItemUids(limitedLayout.rows);
     this.syncLayoutProps(limitedLayout);
     this.setProps('rowOrder', rowOrder);
   }