我们如何在 ext js 4.2 中隐藏和显示网格面板的行？

Question

你好， 我有带有行的网格面板，并且有一个与其他值相对应的列名 ID，例如：-

ID    Type    Status
--------------------------
1      A      True
1      B      True
1      C      False
1      D      False
1      E      False
2      A      True
2      B      False
2      C      False
2      D      False

我需要像下面这样：所以当我点击[显示所有记录..]时，将显示 1 条记录的 ID。与 Id 2 相同，依此类推....

ID    Type    Status
--------------------------
1      A      True
1      B      True
Show all record..
2      A      True
2      B      False
Show all record..

点击显示所有记录后将输出...

   ID    Type    Status
  ----------------------------
    1      A      True
    1      B      True
    1      C      False
    1      D      False
    1      E      False
    2      A      True
    2      B      False
    Show all record..

希望你能理解我要达到的目标。

感谢和问候 维克

Answer 1

您可以将 id 列用作一个组，在分组网格中，您可以选择展开或折叠共享相同值的记录，但如果组折叠它不会显示第一条记录，也不会显示第二条记录.

请参阅此示例：http://docs.sencha.com/extjs/4.2.1/#!/example/build/KitchenSink/ext-theme-neptune/#grouped-grid

Answer 2

没有这样的视图或插件可以完全满足您的需要（在 Ext 4.x 和 Ext 5.x 中都没有），因此需要大量的编码来实现它。

根据 Elias 的建议，如果没有自定义编码，您可以获得的最接近的是分组网格，或者可能不是那么接近，the tree grid。

Answer 3

实现它的一种简单方法可能是使用单个网格，对于每个 ID，它可能会影响性能。 所以，这个想法是：

1) 为每个 ID 创建一个单独的网格，具有单独的存储

2) 限制一次要设置可见的行数（在 store 中使用 getRange()）

3）添加一个按钮，对应每个网格，并执行单击时显示所有行、刷新网格、隐藏按钮（或将文本更改为折叠，并处理单击事件）的动作

注意：会很慢

你可以想出更好的方法来实现这一点，这种方法肯定不需要太多的编码