视图上的参考和选择器

Question

我有一个控制器，它有一个以这种方式定义的引用：

refs : { title_Bar : '#title_Bar'},

当我在主视图中只有一个标题栏并且itemId设置为title_Bar时，它被罚款。

现在我有2个标题栏，项目ID相同，似乎只有一个更新了？

这应该是那种方式还是可能出错？

Answer 1

问题是您的选择器不够具体。

itemId在给定组件中是唯一的，您没有在选择器中指定。 id对于整个应用程序是唯一的（尽管我建议小心使用它们，因为有时你会错误地使用它两次。这很糟糕，因为Sencha使用这个id来呈现html并使用你的id作为html标签的id。因此，如果你指定它两次，两个组件中的一个将不会渲染。

解决方案： 如果你定义了两个不同的页面（每个页面都有一个标题栏，那么你会有类似的东西：

Ext.define('MyApp.view.page1', {
    extend: 'Ext.Container',
    xtype: 'page1',
    items: [
        {
            xtype: 'container',
            itemId: 'title_bar'
        }
    ]
    ....
});

Ext.define('MyApp.view.page2', {
    extend: 'Ext.Container',
    xtype: 'page2',
    items: [
        {
            xtype: 'container',
            itemId: 'title_bar'
        }
    ]
    ....
});

有了这个，您现在可以使用以下选择器访问条形标题：

refs: {
    barOne: 'page1 #title_bar',
    barTwo: 'page1 #title_bar'
}

您当然可以嵌套itemId并阅读further more here

Answer 2

HTML ID是唯一的。

您应该只有一个#title_Bar或以其他方式将您的ID更改为类并将您的选择器更改为.title_bar。