2012-03-27 2 views
2

В extjs4, если у меня есть кнопки следующим образом:xtype в 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 без предоставления id (в этом случае Extjs создаст свой собственный).

ответ

5

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

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

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

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

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

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

+0

Вы имеете в виду Extjs не следует стандартам W3C. Во-вторых, если у вас есть простая страница html с двумя элементами с одинаковым идентификатором, работает только первый (ссылается на getElementById). Как Extjs управляет несколькими идентификаторами в одной DOM. – user1296632

+0

ну, вы не будете следовать стандартам W3C, не позволяя фреймворку генерировать id при рендеринге повторяющихся компонентов. доступ к компонентам можно получить с помощью селекторов css, а также свойства контейнера «itemId» – jthurau

+0

да, как указано выше, прокомментируйте ответственность разработчиков за предоставление разных идентификаторов каждому компоненту, иначе не укажете id и ExtJS знает стандарты W3C, чтобы он создавал уникальный идентификатор для каждого компонента с использованием функции Ext.id() –

0

идентификаторы означает, что вы не можете иметь два на одной странице, они отображаются с 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); 

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