javascript - 查看参考和选择器

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 并在此处进一步阅读

Answer 2

HTML Id 是唯一的。

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