Загадочное содержимое panel.items
 

Здравствуйте!

Я думал что написав это:

var panel = Ext.create("Ext.panel.Panel", {
		defaults: {
			xtype: "panel"
		},
		items: [{
			width: 100, height: 100
		}, {
			width: 100, height: 100
		}, {
			width: 100, height: 100
		}, {
			width: 100, height: 100
		}]
	});
	
	panel.items.each(function(item) {
		console.log(item);
	});

Я получу в консоли список объектов класса Ext.panel.Panel (так как у меня там прописано xtype: "panel").

Но вместо этого я получаю список не очень понятных мне объектов. Чем они мне непонятные? Тем, что в них нет некоторых методов, которые есть в классе Ext.panel.Panel.

В частности нет таких методов, как getWidth и getName (ширина панели и имя класса, соответственно).

Возникает вопросы:
1) Что это за объекты такие?
2) И как получить доступ к объектами в items класса Ext.panel.Panel?

Совсем плохо. Как выяснилось у объекта panel тоже нет метода getWidth. Хотя он вроде класса Ext.panel.Panel... А куда метод делся?

Тут ведь ясно написано: http://docs.sencha.com/ext-js/4-1/#!...ethod-getWidth
Метод имеется.

Так почему он не доступен???

он никуда не делся, у вас просто скорее всего панель не отрендерена, и вы пытаетесь получить значение ширины элементов, которых фактически нет в DOM.

renderTo: Ext.getBody()

Спасибо! Вот уж не думал что этот метод добавляется лишь после рендеринга.

Вы немного не поняли, он не добавляется после рендеринга, он создается во время создания объекта Ext.create("Ext.panel.Panel", {...}), но! когда вы вызываете его до рендеринга, он не может вернуть параметр, так как самого элемента еще нет. Рендеринг обеспечивает добавление элемента в dom.

Тогда не ясно:
1) почему его нет в __proto__ в консоли сразу после создания без рендеринга
2) почему при попытке вызова этого метода появляется ошибка, что такого метода нету

Как это нету?

console.log(item.__proto__.getWidth); // function()

TypeError: this.el is undefined - тоесть нет ссылки на el, которая создается фреймворком после того как элемент отрендерился (появился в dom).

...
panel.items.each(function(item) {
        try {
            item.getWidth();
        } catch(e) {
            alert(e); // TypeError: this.el is undefined
        }
});
...

а метод getWidth как известно возвращает el.getWidth().

Все, разобрался!

Спасибо!

Я совсем забыл про наследование! Там же эти __proto__ вложены друг в друга. И метод getWidth() находится очень глубоко. А я смотрел лишь первый __proto__.