【问题标题】:ExtJS 5 Grid Cell Width Calculation Wrong Using FlexExtJS 5 网格单元格宽度计算错误使用 Flex
【发布时间】:2014-07-24 22:19:37
【问题描述】:

从 4.2.1 升级到 ExtJS 5 后,我发现了一个网格单元格宽度计算问题或似乎是一个问题。

这是列的示例

columns: [
    { header: 'One', dataIndex: 'one', flex: 2 },
    { header: 'Two', dataIndex: 'two', flex: 2 },
    { header: 'Three', dataIndex: 'three', flex: 3 }
]

标题按预期填充网格宽度,但网格单元格宽度不等于标题,分别为 -5px / -5px / -12 px。

外观好像有滚动条的空间,但网格只有一行。 具有足够数据以具有滚动条的网格似乎没有此问题。

调整网格列的大小可以使事物恢复到正确的对齐方式,直到新数据被加载并在关闭宽度计算的情况下再次呈现。它会在新数据加载后不久重新调整大小。

我认为也许 css 是罪魁祸首,但更改主题并没有解决它,也没有使用 ext-all.css 而不是调试 css。

这是一个错误还是我错过了一个可以纠正宽度计算的新配置?

如果这是一个错误......有什么解决方法的建议吗?

非常感谢您的帮助。

更新 1:

我使用 Sencha Cmd 生成了一个基本应用程序,并创建了一个包含列和功能的网格视图。 到目前为止,似乎拥有分组功能似乎是罪魁祸首。 但是,我确实看到了没有分组功能的网格上的行为。 这些网格处于边框布局中,因此我将在接下来进行调查。

【问题讨论】:

  • 它看起来确实像一个错误,但如果没有适当的测试用例,几乎不可能确定它。

标签: grid width cell extjs5


【解决方案1】:

它看起来像错误,但是我发现用 containerauto 布局包装 grid 可以解决这个问题(至少在我的情况下)。

示例:http://jsfiddle.net/nj4nk/3/

在示例中,您可以看到 2 个网格:

  • 第一个内部面板采用 fit 布局 - 行更窄
  • 第二个内部面板,auto 布局 - 行与标题相同

【讨论】:

  • 是的!非常感谢您的修复。使用 layout: 'auto' 已纠正该问题。如何创建自己的 jsfiddle 来分享?
  • 花了很多时间试图解决这个问题。我所要做的就是添加layout: 'auto'。谢谢你的小提琴!
【解决方案2】:

使用 layout:'auto' 会使滚动中断。 似乎为滚动条保留了空间,但设置 reserveScrollbar:false 没有帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-12-18
    • 1970-01-01
    • 2012-01-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多