扩展Ext.Component的自定义ExtJS小部件添加了一个div

Question

我正在创建一个扩展Ext.Component的ExtJS小部件。以下是示例代码。

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