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

В 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"
                    }

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


core extjs
person user1296632    schedule 27.03.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

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

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

person Saket Patel    schedule 27.03.2012
comment
Вы имеете в виду, что Extjs не соответствует стандартам W3C. Во-вторых, если у вас есть простая html-страница с двумя элементами с одинаковым идентификатором, работает только первый (на который ссылается getElementById). Как Extjs управляет несколькими идентификаторами в одном DOM. - person user1296632; 28.03.2012
comment
ну, вы будете тем, кто не следует стандартам W3C, не позволяя фреймворку генерировать идентификатор при рендеринге дублирующихся компонентов. Доступ к компонентам можно получить с помощью селекторов css, а также свойства контейнера itemId. - person jthurau; 28.03.2012
comment
да, как указано в комментарии выше, его разработчики несут ответственность за предоставление разных идентификаторов для каждого компонента, иначе не указывайте идентификатор, а ExtJS знает стандарты W3C, поэтому он создаст уникальный идентификатор для каждого компонента, используя функцию Ext.id() - person Saket Patel; 28.03.2012
comment
@ user1296632 Ext ясно дает понять, что вам не следует жестко кодировать идентификаторы, если компонент можно использовать более одного раза, как и идентификаторы DOM. Я дополнил ответ SilentSakky, предложив способ обойти проблему. - person Juan Mendes; 11.05.2013

arrow_upward
0
arrow_downward

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

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

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

person Juan Mendes    schedule 10.05.2013