(используется extjs 4.2)
Хочу создать свой класс. Наследником является компонент 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);
}
});
Создаем экземпляр объекта:
Ext.create('Ext.panel.Panel',
{
title: 'Hello',
width: 400,
height: 300,
items: [
{
width: 100,
height: 50,
xtype: 'new_com'
}],
renderTo: Ext.getBody()
});
В консоль выведет null. Нашел такой подход:
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);
}
});
в консоль выдаст: <div id="new_com-1010-new_com">123</div>
все верно.
Но вот такая сутуация:
Ext.create('Ext.panel.Panel',
{
title: 'Hello',
width: 400,
height: 300,
items: [
{
xtype: 'tabpanel',
items: [
{
title: 'tab1',
html: 'tab1'
},
{
title: 'tab2',
items: [
{
width: 100,
height: 50,
xtype: 'new_com'
}]
}]
}],
renderTo: Ext.getBody()
});
Есть таб панель, создаем 2 вкладки. Где tab2, в консоль при создании объекта выдаст будет null. Я заметил, что в dom элемента нет. Он появляется когда открывается вкладка tab2. Должно быть событие какое то, которое должно вызываться после того как добавится в dom и в этой функции прописывать соответствующий код?? Или как это реализовать?
Я не понимаю. Подскажите пожалуйста.. Чтобы в консоль выводился dom элемент.