Add Ext.Element to Ext.Component

[Araberen]

Hi,

Simple question: how to add Ext.Element to Ext.Component?

I've been looking through the API doc for almost 2 hours, but can't find an helpful example or method...

I want to have elements that I fully control in a Ext.Component object (or maybe another object will be more adapted, but I want its layout to fit its parent). So I create those elements with Ext.DomHelper, then I convert then into Ext.Element to have access to Ext.Element methods.

A code sample:

Ext.define('APP.PagePreview', {
extend: 'Ext.Component',
alias: 'widget.pagepreview',
id: 'pagepreview',
layout:'fit',
title: 'Nullam dapibus massa venenatis',

initComponent: function() {
this.callParent(arguments);

var box = new Ext.Element(Ext.DomHelper.createDom({ tag: 'div', cls: 'box content' }));
var h2 = new Ext.Element(Ext.DomHelper.createDom({tag: 'h2', html: this.title }));
box.appendChild(h2);

this.append(box); // Here is what I want to do, but I can't find a way to do it !
}
});

Thanks.

[tvanzoelen]

Think you can do



this.listeners: {
render: {
fn: function(c){

var box = new Ext.Element(Ext.DomHelper.createDom({ tag: 'div', cls: 'box content' }));
var h2 = new Ext.Element(Ext.DomHelper.createDom({tag: 'h2', html: this.title }));
box.appendChild(h2);

this.getEl().append(box);

}
}
}


or wrap a container around it



initComponent: function() {
this.callParent(arguments);

var box = new Ext.Element(Ext.DomHelper.createDom({ tag: 'div', cls: 'box content' }));
var h2 = new Ext.Element(Ext.DomHelper.createDom({tag: 'h2', html: this.title }));
box.appendChild(h2);

this.add(Ext.create('Ext.Container', box)); // Here is what I want to do, but I can't find a way to do it !
}



To fit, use layout 'fit'

[Araberen]

Your first solution (with the listener) worked ! :)

About the second one, there is no add method in an Ext.Component... but it doesn't matter anymore. ^^

Thanks you.