Custom ExtJS widget extending Ext.Component adds a div

I am creating an ExtJS widget which extends Ext.Component. The following is the sample code.

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
        }); 
    }

});

The above widget renders into the browser as below

<div id="ext-comp-1014" class="x开发者_如何学Python-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>

How do I get rid of the div tag? or is there any way to convert the div to span?

You can convert the default div to a span tag. You can also use any other html tag in place of the div. Components have an autoEl attribute which allows you to specify any html tag as well as any html tag attributes.

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() {  
        //...
       } 
  }