shieldui 小部件集成 - 自动调整大小的选项卡和自动调整大小的网格答案

【问题标题】：shieldui widget integration - autosized tab with autosized gridshieldui 小部件集成 - 自动调整大小的选项卡和自动调整大小的网格
【发布时间】：2016-11-23 08:00:05
【问题描述】：

你能告诉我如何设置一个包含网格小部件的标签小部件，其中标签小部件自动调整到其容器的大小，网格自动调整到标签容器的大小（并且可以正确滚动）。谢谢。

【问题讨论】：

我现在仍然可以设置这个相当基本的设置。这个ui框架不可能吗？我只是希望该小部件动态跨越其父级的可用宽度和高度（在我的测试用例中：选项卡面板到选项卡面板容器和网格到选项卡面板）。我正在通过 css 进行黑客攻击，但这相当不稳定，如果小部件决定在下次更新时更改其标记，则可能会完全中断。

标签： javascript jquery datagrid tabs shieldui

【解决方案1】：

我认为这是你需要的

https://jsbin.com/didiqa/4/edit?output

只需在 Tab 小部件 div 上使用 CSS 即可获得overflow-y。网格小部件还有一个名为scrolling 的属性，如果列宽大于网格，它会给你一个垂直滚动。您可以查看here。

#tabsDiv {
   height: 250px;
   overflow: scroll; 
}

【讨论】：

并非如此。根据您的示例，我希望： - tabsContainer 跨越其父级的可用宽度和高度（又名 100% 主体） - tabsDiv 跨越 tabsContainer 的可用高度和宽度 - 网格跨越 tabsDiv 的可用高度和宽度 - 网格通常是可滚动的（固定网格header) 在 tabsDiv 的范围内

【解决方案2】：

这是可能的 - 这里是a JSBin example。

要使其完整，您必须考虑以下事项：

限制调整大小事件处理，
调整 CSS 样式 - 内边距、边框等，
尺寸计算，
保存和恢复网格状态（当前页面、选择等）...

【讨论】：

谢谢弗拉基米尔。我希望这可以使用相对大小并将其留给浏览器 - 降低 ui 设置的复杂性。不了解内部结构，destroy/initialize 对客户端资源（cpu、视觉闪烁等）有什么影响？下一次框架更新（小部件标记更改、样式等）中断的可能性有多大？为什么这不是小部件的一部分？
我一直在玩这个，这一切似乎有点太“hacky”了。相对定位、内边距和边距会导致真正的问题，没有考虑在内，而且当项目变得更大并且事情开始变得疯狂时，这里有太多的问题可能会带来巨大的问题。