Javascript senchatouch列表项中的用户定义组件

是否有办法使用用户定义的sencha touch component Ext.extend作为sencha touch list控件中每个项目的面板

我知道我能做到：

{xtype:'list'，itemTpl'{data property 1}}

制作这个

分机列表

-------------------------------------------
| HTML from itemTpl for listStore Item 1  |
|-----------------------------------------|
| HTML from itemTpl for listStore Item 1  |
|-----------------------------------------|
| HTML from itemTpl for listStore Item 1  |
|-----------------------------------------|

我想做的是：

MyComponent = Ext.extend( Ext.Panel ) { Items: [ Ext.Component1, Ext.Component2 ] }
Ext.reg( 'mycomponent', MyComponent );

{ xtype: 'list', itemTpl: { Ext.MyComponent } }

生产这样的东西

-----------------------------------
| { xtype: 'mycomponent' }        |
|---------------------------------|
|  { xtype: 'mycomponent' }       |
|---------------------------------|
| { xtype: 'mycomponent' }        |
|---------------------------------|

因此，列表中的每个列表项都呈现为我的用户定义组件

这可能吗？有什么例子吗

Ext.define('Ext.TextField',{
    extend: 'Ext.form.field.Text',
    xtype: 'TextField',
    labelAlign: 'right',
    listeners: {
        beforerender : function(){
            // var tmp = new Ext.util.TextMetrics("asdfasdf");
            this.labelWidth = gTextUtil.getWidth( this.getFieldLabel() ) + 10 + gLeftMargin;
            this.width = this.labelWidth + 100;
        }
    }
});

如何使用：

{ xtype:'MTATextField', fieldLabel:'or Other' }

---

可以使用renderTo属性将任何组件添加到Dom中的任何div中。只需添加任何符合条件的

<div class='someclass-{id} .wrapper'/> 

输入列表项模板，然后 query.wrapper.someclass-{id}并在列表刷新事件期间使用renderTo创建组件。请不要忘记以后删除旧的未使用组件。在这种情况下，这是你的责任。以这种方式添加的组件由组件管理器管理，但没有父级