Создание своего класса
 

(используется 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 элемент.

все)) сам нашел, как то так:

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>';
		if (this.listeners == undefined)
			this.listeners = {};
		this.listeners.render = {};
		this.listeners.render.fn = function ()
			{
			var id = this.getId(),
				div = document.getElementById(id + '-new_com');
			
			console.log(div);
			}
		Ext.container.New_com.superclass.initComponent.apply(this, arguments);
		}
	});

Надо ждать события afterrender и получать элемент после отрисовки.

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>';
		Ext.container.New_com.superclass.initComponent.apply(this, arguments);

		this.on({
			afterrender : function () {
				// здесь элемент уже создан
			},
			scope : this
		});

		}
	});