Пользовательский компонент в элементе списка senchatouch

Question

Можно ли использовать пользовательский сенсорный компонент sencha (Ext.extend) в качестве панели для каждого элемента в сенсорном списке sa sencha.

• Я знаю, что могу сделатьthis:

  {xtype: 'list', itemTpl "'{свойство данных 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' }        |
|---------------------------------|

, чтобы каждый элемент списка в спискахотображается как мой пользовательский компонент.

Возможно ли это? Является ли это примером?

Answer 1

Вы можете добавить любой компонент к любому div в Dom, используя свойство renderTo.Просто добавьте любой квалифицированный

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

в шаблон элемента списка, затем запросите .wrapper.someclass- {id} и используйте renderTo для создания компонентов во время события обновления списка.Пожалуйста, не забудьте удалить старые неиспользуемые компоненты позже.В этом случае это на вашей ответственности.Компоненты, добавленные таким образом, управляются диспетчером компонентов, но не имеют родительских элементов.

Answer 2

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