PDA

View Full Version : creating component



dmitry.akatev
25 Sep 2013, 8:40 AM
Hello, please help. I am from Russia. English know is bad. I write through a translator.


I want to create your own component. The heir is a component Ext.container.Container.

Ext.define("Ext.container.New_com",
{
extend: 'Ext.container.Container',
alias: "widget.new_com",

initComponent: function()
{
this.html = '<div id="' + this.getId() + '-new_com">123</div>';
var id = obj.getId();
div = document.getElementById(id + '-new_com');

console.log(div); // !!!


Ext.container.New_com.superclass.initComponent.apply(this, arguments);
}
});


Create an object:

Ext.create('Ext.panel.Panel',
{
title: 'Hello',
width: 400,
height: 300,
items: [
{
width: 100,
height: 50,
xtype: 'new_com'
}],
renderTo: Ext.getBody()
});


In the console displays a null. Found this approach:

Ext.define("Ext.container.New_com",
{
extend: 'Ext.container.Container',
alias: "widget.new_com",

initComponent: function()
{
this.html = '<div id="' + this.getId() + '-new_com">123</div>';

setTimeout(function(obj)
{
return function()
{
var id = obj.getId(),
div = document.getElementById(id + '-new_com');

console.log(div);
}
}(this), 10);

Ext.container.New_com.superclass.initComponent.apply(this, arguments);
}
});


the console will be issued. <div id="new_com-1010-new_com">123</div>


but now a new problem:

Ext.create('Ext.panel.Panel',
{
title: 'Hello',
width: 400,
height: 300,
items: [
{
width: 100,
height: 50,
xtype: 'new_com'
},
{
xtype: 'tabpanel',
items: [
{
title: 'tab1',
html: 'tab1'
},
{
title: 'tab2',
items: [
{
width: 100,
height: 50,
xtype: 'new_com'
}]
}]
}],
renderTo: Ext.getBody()
});
Where tab2 will be null. I have noticed that there is no element in the dom. It appears when you open a tab tab2. There should be an event which then?


I do not understand. Tell me please .. To The console displays the dom element.

mitchellsimoens
14 Oct 2013, 2:05 PM
In the initComponent method, the component will not be rendered into the DOM. You would need to use a method like afterRender instead.