视图上的参考和选择器

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更改为class并将选择器更改为.title_bar 。