Creating multiple instance of a view - sencha-touch

Question

Using Sencha Touch ver 2.3.1a
The carousel control in PassDownEntryView
{
xtype: "container",
itemId: "pageEntryItemsContainer",
layout: "fit",
items:
[
{
xtype: "carousel",
itemId: "carouselItems",
direction: "horizontal",
items:
[
]
}
]
}
I'm creating multiple instances of a view for a carousel
var data = JSON.parse(response.responseText);
var itemViewArray = [];
var index = 0;
Ext.Array.each(data.Data, function(item)
{
var itemView = Ext.create('MCConnect.view.PassDown.PassDownEntryItemView');
itemView.setItemId('EntryItemId' + index);
itemView.configureEntry(item);
itemViewArray.push(itemView);
index++;
});
if(itemViewArray.length > 0)
{
carouselControl.setItems(itemViewArray);
}
configureEntry sets the html in the PassDownEntryItemView
{
xtype: "label",
html: ""
}
Code that sets the label:
configureEntry: function(item)
{
var fieldLabel = Ext.ComponentQuery.query('label')[0];
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
It creates the right number of carousels but only the first instance has the label set. The rest of them are blannk. I did an output of configureEntry() and
it is properly passwing each item. Seems like im missing something when setting it. Any ideas?
Update: 6/21 - A
It seems like the problem is the instance of the view. Cause When I create a hard coded view:
var item1 =
{
item: "test1"
}
var itemView = new MCConnect.view.PassDown.PassDownEntryItemView();
itemView.configureEntry(item1);
var item2 =
{
item: "test2"
}
var itemView1 = new MCConnect.view.PassDown.PassDownEntryItemView();
itemView1.configureEntry(item2);
carouselControl.setItems([itemView, itemView1]);
I still get the result that only "Test2" shows even though there are two carousel panels showing up. Except the second one is blank
Update 6/22
Ive added my PassDownEntryItemView code below:
Ext.define('MCConnect.view.PassDown.PassDownEntryItemView',
{
extend: 'Ext.form.Panel',
xtype: 'passdownEntryItemView',
requires:
[
'Ext.data.Store',
"Ext.field.Text",
"MCConnect.view.Commons.AutoHeightTextArea"
],
config:
{
itemId: '',
isReadOnly: true,
passDownEntryItemId: 0,
layout: "vbox",
items:
[
{
xtype: 'fieldset',
style: 'padding: 0; margin: 1px;',
items:
[
{
xtype: "label",
html: ""
}
]
}
],
listeners:
[
]
},
initialize: function()
{
},
configureEntry: function(item)
{
this.setPassDownEntryItemId(item.passDownEntryId);
var fieldLabel = Ext.ComponentQuery.query('label')[0];
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
});
6/22
Thanks to Akatum suggestion. I figured it out. I labeled the itemId of the label as #labelDistrictItem-0 so in my configureEntry() i searched for it then set it and renamed the itemId:
var fieldLabel = Ext.ComponentQuery.query('passdownEntryItemView #labelDistrictItem-0')[0];
fieldLabel.setItemId('labelDistrictItem-' + item.id);
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
and it works now

Answer 1

Problem is in your configureEntry function. var fieldLabel = Ext.ComponentQuery.query('label')[0]; will always returns first label component in your whole application. So in your case it will always returns label which is in your first carousel panel.
Instead of using Ext.ComponentQuery.query('label')[0]; you should look for specific label in specific MCConnect.view.PassDown.PassDownEntryItemView by using up() or down() methods (depends on layout of your application).
Edit
You can get your label component by looking for it only in child components of your PassDownEntryItemView. For this you can use down() method. So your configureEntry method should look like this:
configureEntry: function(item) {
this.setPassDownEntryItemId(item.passDownEntryId);
var fieldLabel = this.down('label');
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
Fiddle with working example: https://fiddle.sencha.com/#fiddle/6t4