Extjs 将网格面板添加到手风琴内容

Question

我实际上不确定这是否可能，但无论如何我都会问。我有一组手风琴控件，在每个控件的内容主体中，我需要显示一个网格面板。网格面板需要附加一个点击事件。我尝试简单地创建网格面板并将手风琴的 html 属性设置为它，但这不会产生任何内容。

有什么办法可以实现上述目标吗？

Answer 1

这是完全可能的，但手风琴的主体不是放置它的地方。您需要将它添加到手风琴的items: [] 数组中。正文（或 html）只接受 html。 示例：

http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html

这个里面有一个网格。

Answer 2

您不能将 html 内容（由属性插入）与任何其他内容一起使用。如果添加任何item，html 属性值将不会设置/覆盖。但可以肯定的是，您可以将任何您想要的东西放入一个手风琴面板中。甚至是网格。但是对于这种情况，基于last question，我建议您将视图引用到网格中。你可以简单地使用ComponentQuery

点击事件可以通过控制器的control函数来应用。

为了您的基本理解：

在 ExtJS 中你很少使用纯 html 代码。在大多数情况下，您使用任何类型的组件。所有都嵌套在 items-array 或 dockedItem-array 中。这些数组中的项目也由布局系统处理。

一些适用于控制功能的查询示例

以下this指的是控制器本身。

您知道网格的 ID（通常您没有这样做）。 ID 由起始 # 标记

control({'#yourId': {itemclick: this.onItemclick }});

你知道 xtype 并且这种类型只有一个实例。您还可以通过在 xtype 之间使用空格来描述路径。

control({'grid': {itemclick: this.onItemclick }});

您已将自定义属性设置为网格（您可以通过这种方式引用任何属性）。这个完全兼容上面那个。 我在你的情况下推荐这个

control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});

这只是使用 ComponentQueries 的一些方法，还有更多。更详细的解释你应该参考ComponentQuery的sencha API

还要注意，每个组件都实现了 up() 和 down() 方法，它们也支持 ComponentQueries。

我忘了说：对于一个控件，查询严格地只需要返回一个结果（只会采用第一个），另一方面，一个 ComponentQuery 可以返回多个结果。