xtype в Extjs4 создает тот же идентификатор

Question

В extjs4, если у меня есть кнопка:

Ext.define('Pandora.view.MyButton', {
extend: 'Ext.button.Button',
alias: 'widget.mybutton',
text: 'click me',
id: 'butid'

});

Если я использую ее в окне просмотра следующим образом:

                    {
                      xtype: 'panel',
                      id: 'panelid',
                      title: 'One tab',
                      html: '<p>what is this </p>'
                    },
                    {
                      xtype: "mybutton"

                    },
                    {
                      xtype: "mybutton"
                    }

Thisсоздаст две кнопки с одинаковым идентификатором (что не рекомендуется W3C), и это может привести к странному поведению.Для повторного использования одной и той же кнопки в приложении рекомендуется использовать xtype без указания идентификатора (в этом случае Extjs создаст свою собственную).

Answer 1

Это создаст две кнопки с одинаковым идентификатором

да, это верно для вашей ситуации, потому что вы жестко закодировали конфигурацию id при создании класса

Ext.define('Pandora.view.MyButton', {
    extend: 'Ext.button.Button',
    alias: 'widget.mybutton',
    text: 'click me',
    id: 'butid'     <=========
});

из документов ExtJS4:

Обратите внимание, что этот идентификатор также будет использоваться в качестве идентификатора элемента для содержащий HTML-элемент, который отображается на странице для этого составная часть. Это позволяет вам писать правила CSS на основе идентификатора для конкретный экземпляр этого компонента уникально, а также выбрать подэлементы, использующие идентификатор этого компонента в качестве родителя.

Ссылка: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button

Answer 2

идентификаторы означают, что вы не можете иметь два на одной странице, они сопоставлены с 1 по 1 с идентификаторами DOM. Следовательно, вы не можете определить класс, который будет использоваться повторно, чтобы иметь жестко закодированный идентификатор. Если вам нужно найти все элементы вашего класса, используйте Ext.ComponentQuery.query, передавая нужный вам тип x

// You should also pass in a root component to start the search from
// but it's optional
var buttons = Ext.ComponentQuery.query('mybutton', root);

Теперь вы можете удалить свой идентификатор из определения класса