Пользовательский виджет ExtJS, расширяющий Ext.Component добавляет div

Question

Я создаю виджет ExtJS, который расширяет Ext.Component. Ниже приведен пример кода.

Ext.define('test.widget',{
    extend: 'Ext.Component', 

    initComponent: function() {             
        this.callParent();              
    },

    onRender: function() {  
        this.callParent(arguments); 
                   Ext.create('Ext.form.Label', {
        html: '<img src="Available.png" />&nbsp;Test',
        renderTo: me.renderTo
        }); 
    }

});

Приведенный выше виджет отображается в браузере, как показано ниже

<div id="ext-comp-1014" class="x-component x-component-default" role="presentation"></div>
<label for="" id="label-1028" class="x-component x-component-default" role="presentation"><img src="Available.png" >&nbsp;Test</label>

Как мне избавиться от тега div? или есть ли способ конвертировать div в span?

Answer 1

Вы можете преобразовать div по умолчанию в тег span. Вы также можете использовать любой другой тег html вместо div. Компоненты имеют атрибут autoEl, который позволяет указывать любой тег html, а также любые атрибуты тега html.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.AbstractComponent-cfg-autoEl

  Ext.define('test.widget',{
       extend: 'Ext.Component', 
       autoEl: {tag:'span'},
       initComponent: function() {             
           this.callParent();              
       },

       onRender: function() {  
        //...
       } 
  }