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

[khusamov]

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

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

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?

[khusamov]

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

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

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

[nekto_O]

Совсем плохо. Как выяснилось у объекта panel тоже нет метода getWidth. Хотя он вроде класса Ext.panel.Panel... А куда метод делся?
он никуда не делся, у вас просто скорее всего панель не отрендерена, и вы пытаетесь получить значение ширины элементов, которых фактически нет в DOM.
renderTo: Ext.getBody()

[khusamov]

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

[nekto_O]

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

[khusamov]

он создается во время создания объекта

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

[nekto_O]

1) почему его нет в __proto__ в консоли сразу после создания без рендеринга
Как это нету?
console.log(item.__proto__.getWidth); // function()
2) почему при попытке вызова этого метода появляется ошибка, что такого метода нету
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().

[khusamov]

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

Спасибо!

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