Question

我有一组动态组合的Controller / View，每个都有一个“选择器”列表和一个“容器”，这样的容器可以有另一个选择器+容器对，依此类推。哪个是根选择器+容器控制器的实例。

这是Controller的标题定义（抽象类）：

Ext.define('MyApp.controller.explorer.Base', {
    extend: 'Ext.app.Controller',
    refs: [
        {ref: 'explorerContainer', selector: '[itemId="explorerContainer]'},
        {ref: 'explorerSelector', selector: '[itemId="explorerSelector]'}
    ],

问题是我不知道ComponentQuery选择器应该只与我的控制器的子元素匹配这样的itemId。因为通过使用[itemId =“explorerContainer”]来匹配组件，它会全局地进行匹配，回答组合树中最顶层的容器。

在之前的实验中，我使用ExtJS 3，通过myComponent.getComponent（'...'）访问子元素，但是现在没有getComponent（），我无法在ExtJS 4中找到等价物。

提前致谢。

Answer 1

您正在混合使用位控制器和问题中的视图。例如“我的控制器的子元素”。控制器不是一个组件 - 只是事件的观察者。视图包含子组件等。

您需要更熟悉Ext.ComponentQuery课程。您可以在应用或演示页面上使用Firebug进行实验。你只需弹出firebug控制台并键入Ext.ComponentQuery.query('panel') - 然后用您认为正确的表达式替换面板并测试它。如果您安装Illuminations For Developers插件 - 您将获得Ext组件而不是通用JS对象 - 这非常有用。

文档有一些查询示例：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery。您会发现“>”符号将查询限制为直接子项。

希望这会有所帮助。如果不发布更多代码，我们可以帮助您创建一些选择器。

Answer 2

您可以执行component.query（＆＃39; selector＆＃39;）查询从您的组件开始的子树。

Answer 3

阅读Ext.ComponentQuery文档我在底部找到了这个：

“为了便于访问基于特定容器的查询，请参阅 Ext.container.Container.query，Ext.container.Container.down和 Ext.container.Container.child方法。另请参阅Ext.Component.up。“

所以 Ext.container.ContainerView （xtype：容器）实现子（ [selector] ），它回答匹配选择器字符串参数的第一个子元素。

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.Container-method-child

它完全符合我的要求。

仅用于子元素的ComponentQuery选择器

3 个答案: