IgniteUI IgTileManager 在切换布局时无法保持正确的最大化磁贴位置答案

【问题标题】：IgniteUI IgTileManager does not maintain the correct maximized tile location when switching layoutsIgniteUI IgTileManager 在切换布局时无法保持正确的最大化磁贴位置
【发布时间】：2015-04-27 20:58:44
【问题描述】：

我正在尝试根据窗口大小和方向设置不同的布局。一个图块比其他图块大，被认为是“最大化”图块。其余的被“最小化”。当我单击“最小化”图块时，它会将其与“最大化”位置交换。

作品： 如果我不交换任何瓷砖，而只是改变布局，那么一切都是正确的，最大的瓷砖位置被认为是“最大化”的瓷砖。

不起作用： 如果我首先单击“最小化”图块以将其与“最大化”图块交换，然后更改布局，图块管理器将使用不正确的位置来保存“最大化”图块。

最大化的图块索引应该参考项目列表中哪个图块配置是最大化的图块，但是当图块被交换时，这似乎会改变。

JSFIDDLE： http://jsfiddle.net/seadonk/72apwsb2/

     var optionsWide = {
                items: [
                    { rowIndex: 0, colIndex: 1, rowSpan: 3, colSpan: 6 },
                    { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 }
                ],
                minimizedState: ':not(.maximizedContainer)',
                maximizedState: ':not(.minimizedContainer)',
                maximizedTileIndex: 0,
     };

     var optionsNarrow = {
                items: [
                    { rowIndex: 0, colIndex: 0, rowSpan: 6, colSpan: 3 },
                    { rowIndex: 6, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 6, colIndex: 1, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 6, colIndex: 2, rowSpan: 1, colSpan: 1 }
                ],
                minimizedState: ':not(.maximizedContainer)',
                maximizedState: ':not(.minimizedContainer)',
                maximizedTileIndex: 0,
     };

     $(function () {         
         $('#layoutContainer').igTileManager(optionsWide);
         $('#wideBtn').click(function () {
             $('#layoutContainer').igTileManager(optionsWide);
         });
         $('#narrowBtn').click(function () {
             $('#layoutContainer').igTileManager(optionsNarrow);
         });
     });

【问题讨论】：

标签： jquery infragistics ignite-ui

【解决方案1】：

您正在更新磁贴配置并在单击按钮时将其与现有配置合并。如果您先销毁小部件，然后使用新配置对其进行初始化，您的示例将起作用。我已经更新了your fiddle。

 $(function () {         
     $('#layoutContainer').igTileManager(optionsWide);
     $('#wideBtn').click(function () {
         $('#layoutContainer').igTileManager("destroy");
         $('#layoutContainer').igTileManager(optionsWide);
     });
     $('#narrowBtn').click(function () {
         $('#layoutContainer').igTileManager("destroy");
         $('#layoutContainer').igTileManager(optionsNarrow);
     });
 });

【讨论】：