Titanium scrollable view index - titanium

Question

My project is to list products with a views, then when click on a product i have to go to another page and re-list the products with scrollableview and target the clicked view to be displayed first (sorry for bad english):
Let's say this is my list (Grabbed from a collection) :
<Alloy>
<Window id="products" onClose="cleanup" title="All products" class="container" >
<ScrollView dataCollection="list_products" dataTransform="parse_liste" layout='vertical' id="results" class="resultats">
<View product_id="{ID}"
product_photo="{photo}"
product_name="{product_name}" lauyout='horizontal' class='heightAuto' width='Ti.UI.FILL' backgroundColor='#eee' bottom='1'>
<ImageView touchEnabled="false" left='10' image='{photo}' />
<View touchEnabled="false" layout='vertical' height='Ti.UI.SIZE'>
<Label touchEnabled="false" left='100' class='nom' text='{product_name}' />
<Label touchEnabled="false" left='100' class='nom' text='{product_price} €/h' />
</View>
</View>
</ScrollView>
<ActivityIndicator color="white" id="activityIndicator" message="Chargement des candidats ..."/>
</Window>
When click on product (the controller) :
var products = Alloy.Collections.liste_recherche;
$.activityIndicator.show();
products.fetch({
success:function(model,results){
Alloy.Globals.results = results;
$.activityIndicator.hide();
}
});
//// CLICK ON A PRODUCT
$.list_products.addEventListener('click', function(e){
if( Alloy.Globals.results ){
///////// GO TO PRODUCT PAGE AND PASS ARGS
var xpng = require('xpng');
xpng.openWin(Alloy.CFG.nav, 'product', Alloy.Globals.products);
}
});
The product page :
var args = $.args;
function getProfil(){
var products_array = [];
var c = ['gray','green','blue','red'];
_.each(args, function(item, key, value){
/* Créer la vue */
var product_container = Ti.UI.createView({
id:item.ID,
layout:'vertical',
backgroundColor:c[Math.floor(Math.random() * c.length)]
});
var product_image = Ti.UI.createImageView({ image : item.photo});
var product_name = Ti.UI.createLabel({
text: item.champs_candidat.nom
});
product_container.add(product_image);
product_container.add(product_name);
products_array.push(product_container);
});
var style = $.createStyle({
classes: ['listeProfiles'],
apiName: 'ScrollableView'
});
var product_scroller = Ti.UI.createScrollableView({
className: 'listeProfiles',
views : products_array,
showPagingControl:true
});
product_scroller.applyProperties(style);
$.product_win.add(product_scroller);
}
Those codes works fine, just i want to display clicked view (from page A) first.
Thank you for help.

Answer 1

I think you need to capture which view was clicked on ScrollView click event:
$.list_products.addEventListener('click', function(e){
// e.source will give you the clicked view and will behave like $.VIEW_ID
// so you can access any property or method of the clicked view using e.source here
Ti.API.info("Clicked View ID = " + e.source.product_id);
if( Alloy.Globals.results ){
///////// GO TO PRODUCT PAGE AND PASS ARGS
var xpng = require('xpng');
xpng.openWin(Alloy.CFG.nav, 'product', Alloy.Globals.products);
}
});
As per your code, you have already disabled the touches of child-views of the view with this property product_id, so the above modified click event code will be able to provide you the correct product ID of the clicked View inside the ScrollView.
Now:
You have the product_id of the view clicked.
Write code on your collection data to know the index of that
product_id.
Use the index from step 2 to set this property currentPage of ScrollableView
Here is the summary of overall process:
Get the product_id of the clicked view using e.source
Use this product_id to know its index in data collection.
Finally, index from step 2 will be the value of currentPage property of ScrollableView. (it's your preference how you pass this index to product page.)