Question

是否有办法使用用户定义的sencha触摸组件（Ext.extend）作为sencha触摸列表控件中每个项目的面板。

我知道我可以这样做：

{xtype：'list'，itemTpl“'{data property 1}'}

制作本

Ext.List

-------------------------------------------
| 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' }        |
|---------------------------------|

这样列表中的每个List项都会呈现为我的用户定义组件。

这可能吗？以下是一个例子吗？

Answer 1

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' }

Answer 2

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

即可

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

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

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

2 个答案: