Not sure if this is a bug or not, but I'm trying to add Ext.Img items to an existing container in a JSONP callback. When I inspect the image container, all the Ext.Img's are registered as innerItems and not items. Only the last image added registers as an item in the container's items array.
Code:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
itemId: 'myContainer',
listeners: [
{
fn: 'onContainerShow',
event: 'show'
}
]
},
onContainerShow: function(component, options) {
Ext.data.JsonP.request({
url: 'https://api.instagram.com/v1/tags/boisestate/media/recent?access_token=6453617.7048f76.66aa249b768743a0b61f2cfe90676420&callback=callbackFunction',
callbackKey: 'callback',
params: {client_id: '5e250c59a7f941a29ebffad4c21f7dbd'},
success: function(result, request) {
//console.log(result);
if(result.meta.code === 200) {
instagramPics = result;
for(var i = 0 ; i < result.data.length; i++) {
var img = Ext.create('Ext.Img',{
height: window.innerWidth / 3,
width: window.innerWidth / 3,
style: 'float: left;',
itemId: 'boiseStatePhotos',
src: result.data[i].images.thumbnail.url,
instagram: result.data[i]
});
component.insert(0,img);
}
} else { // When bad or no data comes back from instagram API
Ext.Msg.alert(":(", "Aw, snap. For some reason we can\'t load pics right now. Try again.");
}
}
});
instagramContainer = component;
console.log(instagramContainer);
}
});
This behavior makes it difficult to add more items to the top of the container as well as impossible to removeAll.
Is this behavior expected?
Thanks!