Develop Reference

Set the ID of View and TextView in titanium appacelerator

I'm creating an for to create randomly textAreas but I need to know which textArea was pressed by the user.
Is there any way to enter a unique ID for each textArea?
How I create the textView:
var txtArea = Ti.UI.createTextArea({
color : '#000',
backgroundColor : 'transparent',
font: {
fontSize : 28,
fontWeight : 'normal',
},
editable : false,
textAlign : 'left',
value : a[i],
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
I tried to put "id : i", but all textAreas returned the same ID.

It's not suggested to add custom properties to Titanium proxies. Here is what I would do (based on my guess of what you try to achieve):
for(var i = 0; i < 10; i++){
var txtArea = Ti.UI.createTextArea({
value : "test n " + i,
textAlign : 'left',
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
(function(){
var id = i;
txtArea.addEventListener('click',function(){
console.log(id);
});
})();
}

If you want assign a numerical ID, you are in the right way but I think that you must insert all TextAreas in rows of Table view. This because you get ID from table view row not from Textarea. Your id's attemp was correct if you inserted in a table view row.
Your code for create textArea is something like this:
var txtArea = Ti.UI.createTextArea({
id: i,
value : "test n " + i,
textAlign : 'left',
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
You can furthermore get the id of each row simply add a click Event Listener, in particular case:
tableViewRowName.addEventListener('click', function(e) {
console.log(e.source.id);
}
Let me know if works and not hesitate to contact me.
FULL EXAMPLE
In your controller js
var win = Ti.UI.createWindow();
var scrollableView = Ti.UI.createScrollView();
var table = Ti.UI.createTableView();
var tableData = [];
for(var i=0;i<list.length;i++){
var row = Ti.UI.createTableViewRow();
var txtArea = Ti.UI.createTextArea({
id: i,
value : "test n " + i,
textAlign : 'left',
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
row.add(txtArea);
tableData.push(row);
}
table.setData(tableData);
scrollableView.add(table);
win.add(scrollableView);
win.open();
This is what i mean: in your structure you have already an empty table view.
You populate dinamically this table in your controller, with a loop (for or while it's the same).
Every iteration you push the row with the respective TextArea and at the end of loop you populate the table with setData
Regards

Scroll to anchor after opening fancybox

i have realized a "help"-view in a fancybox.
In this fancybox i've got a navigation menue. This menue works with anchor links. So far so good.
Now i want to open this fancybox and directly scroll to a spezific anchor.
Here my code, how i open the fancybox:
$.fancybox({
width : 1000,
height : 800,
minHeight : 800,
maxHeight : 800,
minWidth : 1000,
maxWidth : 1000,
fitToView : false,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'yes',
href : "#idofview",
})
I tried a few things, but nothing works.
I tried:
location.href = "#anchor";
//or
location.hash = "#anchor";
//or
afterShow: function() {
$(this).closest('.fancybox-inner').animate({
scrollTop: $('.fancybox-overlay').scrollTop() + $("#anchorid").offset().top
});
//or
$(document.body).scrollTop($('#anchorid').offset().top);
I also tried to trigger the click of my anchor link:
$("#btn_link").trigger('click');
Is there any reason to direktly scroll to the anchor in a fancybox?

You may need to find the offset().top of your targeted anchor first, then just animate the .fancybox-inner selector to that position (you don't need this $(this).closest() method at all) so :
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
// API options
afterShow: function () {
var toScroll = $(".fancybox-inner").find("#anchor2").offset().top - 35;
$(".fancybox-inner").animate({
scrollTop: toScroll
}, 1000);
}
}); // fancybox
}); // ready
Notice that I am subtracting 35px from the offset (in var toScroll) because the fancybox's padding, but this is a variable you may need to play with.
See JSFIDDLE

ExtJS 5: Resize panel on image loaded

It seems like a trivial task to do but I'm still unable to accomplish it.
I'm building an application with ExtJS 5 and I have a panel with an image component on it. The panel has to resize (shrinkWrap : true) to the original size of the image. The problem is that when the layout manager is calculating the size of the panel, the image isn't yet loaded completely so it's size is 0,0. I tried to add different listeners like afterrender, render, boxready and practically all of the rest but nothing seems to work fo me - the image size is always equals to 0. I also tried to bind the sizes of the two components as you'll see in the code below, but this doesn't worked either. If i configure the boxready event with a delay of 1 second the image size is finally computed and I can call updateLayout() but this is a very unreliable solution because the image is loaded from remote server and I'm unable to predict the exact time of server response. I know that at some point of the application lifecycle the image is loaded and I need to find which event is being fired in order to resize my panel.
Example code
Ext.application({ name : 'MyApp',
launch : function() {
/*
* I was hoping that taking the image out of the panel
* will 'force' it to be created earlier.
*/
var img = Ext.create('Ext.Img', {
src : 'img.jpg',
reference : 'bgimg',
publishes : {
width : true,
height: true
}
listeners : {
boxready : { fn : 'imgReady', scope : this, delay : 100 }
}
});
Ext.create('Ext.Panel', {
renderTo : Ext.get('extjs-content'),
width : 1000,
height: 700,
defaults : {
border : true
},
layout : 'border',
items : [{
region : 'north',
height : 80,
}, {
region : 'east',
width : 200,
collapsible : true
}, {
region : 'center',
autoScroll : true,
items : [{
/*
* This is the container of the image. Please note that
* I need it to preserve its absolute layout.
*/
id : 'canvas',
layout : 'absolute',
shrinkWrap : true,
// bind : {
// width : '{bgimg.width}',
// height: '{bgimg.height}'
// },
items : [img]
}]
}]
});
},
/*
* If I call this with delay of 1000ms the image size is 'ready'
* otherwise it is 0, 0.
*/
imgReady : function(img) {
console.log('Image size: %o', img.getSize());
Ext.ComponentQuery.query('#canvas')[0].updateLayout();
}
});

You can track when the image is loaded with the load event of the img element.
var img = Ext.create('Ext.Img', {
src : 'img.jpg',
reference : 'bgimg',
publishes : {
width : true,
height: true
},
listeners : {
load : {
element : 'el',
fn : 'imgReady'
}
}
});

Bubble chat titanium

https://developer.appcelerator.com/question/146449/how-do-i-make-a-view-with-a-bubble-but-with-a-continuous-border
I have found this tutorial, and I am trying to create a bubble chat window in titanium.
However the trouble I am having is that I cannot get the height/width of the label until I have stuck it onto the window and inside the view, even then if the label is too small, the bubble chat becomes distorted.
What is the best way to accomplish this in titanium, thanks.
var label1 = Titanium.UI.createLabel({
color : '#999',
text : 'I am Window 1',
font : {
fontSize : 20,
fontFamily : 'Helvetica Neue'
},
textAlign : 'center',
height : 'auto',
width : 'auto',
});
var bubble1 = Ti.UI.createView({
backgroundImage : 'bubble.png',
backgroundLeftCap : 43,
backgroundRightCap : 34,
backgroundTopCap : 34,
backgroundBottomCap : 36,
height : 10,
top : 10,
visible: false,
width : 10
});
bubble1.add(label1);
win1.add(bubble1);

To get height/width of label use: label1.toImage().width or label1.toImage().height
and the best way to do it is:
after adding label to View you need:
check width of label, if it is too long, and over fit of screenwidth then change back label width to size of screen - 50 px. if(label1.toImage().width > Ti.Platform.displayCaps.getPlatformWidth()) label1.width = Ti.Platform.displayCaps.getPlatformWidth() -50;
Change back width of View to same width of label.
Set label1.heigh = Ti.UI.SIZE (auto is not supported now)
Set View.height = Ti.UI.SIZE
To check small size, you can do this:
if(Ti.Platform.displayCaps.getPlatformWidth() < 100){
label1.width = 100;
View.width = Ti.UI.SIZE;
}

Jquery Fancybox height / scroll down

i am using fancybox for displaying certain pages on my website.
my problem is that i have no idea how i can make it with a fixed height and to scroll down to view more content if necessary (if the content flows down more than the specific height parameter of the fancybox)
here are my parameters in the page:
<script>
$(document).ready(function() {
$(".fancybox_link").fancybox({
'width' : 680,
'height' : 550,
'autoScale' : false,
'autoDimensions' : false,
'scrolling' : 'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
what should i do to make the content flow with a scroll bar for the height?
thank you.

Edit : Is it the "Scrolling : 'yes'" parameter that doesn't work ?
Otherwise, I think, you can to edit/overwrite the Fancybox CSS :
#fancybox-content {
height: 680px;
width: 550px;
padding: 0;
margin: 0;
overflow: scroll;
}
Or something like this. I've do that for a previous project, but don't have the code under the hand to give you the exact syntax.

You actually need to set the option
'scrolling' : 'yes',
That will create scroll bars inside fancybox so you can browse long content.

Try with:
'autoSize' : false