Appcelerator Titanium: Controlling Views Height and Top Automatically - javascript

var Section1 = Titanium.UI.createView({
top:0,
height: 'auto',
});
var Section2 = Titanium.UI.createView({
top:0,
height: 'auto',
});
I have two views and these two views has some buttons and TextFields which comes dyanmically. How can i control the Section 2 that it does not over lap the Section 1 View when its height gets increased.

I don't know if there's a better way, but I had a similar issue recently, which I tentatively solved like so
var Section1 = Titanium.UI.createView({
top:0,
height: 'auto',
});
// Add other views to Section1
var Section2 = Titanium.UI.createView({
top: Section1.toImage().height,
height: 'auto',
});
I think in your case the height will only be accurate after you've added your other views and objects to it.

If you are adding your views directly to the Ti.UI.currentWindow then you can just set layout of the Ti.UI.currentWindow to 'vertical' and the heights will automatically adjust
Ti.UI.currentWindow.layout = 'vertical';

Ti.UI.createView({
layout : 'vertical',
height : Ti.UI.SIZE
});

Related

Space between Each Tableviewrow Titanium Alloy

How to get space between TableViewRow has show in above image.
Window.js
for(var i=0;i < election.length ;i++){
//
tblRow_Election[i] = Titanium.UI.createTableViewRow({
height:(Ti.Platform.osname == 'ipad')?'280':'140',
width:Titanium.Platform.displayCaps.platformWidth,
left:(Ti.Platform.osname == 'ipad')?'20':'10',
right:(Ti.Platform.osname == 'ipad')?'20':'10',
color:'red',
touchEnabled: true,
borderRadius:'4',
borderWidth:'1',
borderColor:'green',
});
data.push(tblRow_Election[i]);
}
$.tbl_ElectionList.data = data;
Window.tss
"#tbl_ElectionList":{
top:'40',
height:'auto',
backgroundColor:'transparent',
left:'10',
right:'10',
style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
borderColor:'green',
separatorInsets: {
left:0,
right:0,
},
}
Window.xml
<Alloy>
<Window id="ElectionWin" class="ElectionWindow" >
<View class="container" id = "view_Election" backgroundColor="white">
<TableView id="tbl_ElectionList">
</TableView>
</View>
</Window>
</Alloy>
Unable to get gap between each row . Can any one advice me how to achieve the gap between each tableviewRow.
#All Thanks in Advance
First you have to set the separator style to none, so that you can define gaps yourself, you can set this in the table' tss, I would also not use the grouped style as this further constrains your styling:
"#tbl_ElectionList":{
top:'40',
height:Ti.UI.SIZE,
left:'10',
right:'10',
separatorStyle : Titanium.UI.iPhone.TableViewSeparatorStyle.NONE,
borderColor:'green'
}
Try adding rows that way and you should see the gaps
var containerrow = Titanium.UI.createTableViewRow({
height:(Ti.Platform.osname == 'ipad')?'280':'140',
width: Ti.UI.FILL
});
// This innerView will be set in the middle of the row
// It will hold your main row content
// We make it smaller than the row to give padding
var innerView = Ti.UI.createView({
width : '80%',
height : '80%',
color:'red',
borderRadius:4,
borderWidth:1,
borderColor:'green'
});
containerrow.add(innerView);
// Add to the table data
data.push(containerrow);
Then of course set the data as you did before.

make a view scroll horizontally rather than vertically

I'm struggling to make a scroll view scroll sidewards rather than up and down in titanium. I'll need the solution for both iOS and Android.
var challengesScrollView= Ti.UI.createScrollView({
top: '60%',
height: c1Container.height,
width: '60%',
backgroundColor: 'yellow',
zIndex: 9000,
/* left & right work too */
contentHeight:'auto',
});
challengesScrollView.add(c1Container);
challengesScrollView.add(c2Container);
challengesScrollView.add(c3Container);
mainContainer.add(challengesScrollView);
UPDATE:
my mainContainer is the following:
var mainContainer= Ti.UI.createView({
left: '5%',
right:'5%',
top: '9%',
bottom:'15%',
});
and c1Container is:
var c1Container= Ti.UI.createView({
top:'1%',
width:'70dp',
height: '90dp',
zIndex:20,
left:'10dp',
backgroundColor:'#3b214a',
borderRadius: 5
});
and it contains the following:
var c1PicView= Ti.UI.createView({
width: '55dp',
height: '55dp',
top: '5%',
borderRadius: 5,
//backgroundColor:'pink',
zIndex:5
});
var c1Pic= Ti.UI.createImageView({
image:'girl.jpg',
width: c1PicView.width,
height: c1PicView.height,
zIndex:5
});
var cName= 'Mary';
var c1Name=Ti.UI.createLabel({
color: 'white',
text: cName,
font:{fontSize: '14sp'},
top: '60dp'
});
c1Container.add(c1PicView);
c1PicView.add(c1Pic);
c1Container.add(c1Name);
c2 is the same as c1 apart from the name
I'm not sure how to position c1Container, c2Container and c3Container etc. so that they will just add on the view sidewards. I can't give actual pixel, left or right positions because the scroll view could have up to 20 mini containers. All help appreciated
simple thing is that you just need to set layout property to horizontal.
In fact, you can use a ScrollView (and it should work both on iOS and android).
I've just tried this code which works just fine :
var win = Ti.UI.createWindow();
var challengesScrollView = Ti.UI.createScrollView({
top: '60%',
height: '30%',
width: '60%',
backgroundColor: 'yellow',
layout: 'horizontal'
});
win.add(challengesScrollView);
function addView() {
challengesScrollView.add(Ti.UI.createView({
left: '10dp',
width: '100dp',
height: '100dp',
backgroundColor: '#FF0000'
}));
setTimeout(addView, 2000);
}
win.addEventListener('open', addView);
win.open();
This code add a new View to the ScrollView every 2 seconds and, as you wish, the ScrollView's width change every time.
The property layout: 'horizontal' is used to place each view horizontally in the ScrollView. Thus, you don't have to calculate the absolute position of each view.
If this property doesn't solve your issue, maybe you should share more code (for example the construction of your containers). Otherwise, it will be difficult to help you ;)
use Horizontal scroll widget in android
For iOS:
UIScrollView scrolls in different directions depending on its contentSize property. If you make the contentSize's width larger then the actual width of the scroll view, it should scroll horizontally.

Extjs Grid Width Calculated Wrong

I am trying to create a Extjs Grid with no vertical and horizontal scroll bars. it means that the grid should expand to infinity in both direction.
here is my code:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
// setup the state provider, all state information will be saved to a cookie
//Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var cols = 50;
var colsData = [];
var fields = [];
for(var i=1;i<cols;i++){
colsData.push(
{
text : 'COLUMN - ' + i,
//flex : 1,
width : 120,
sortable : true,
dataIndex: 'COL'+i
});
fields.push(
{name: 'COL'+i, type: 'int'}
);
}
var myData = [];
//create data
for(var i=1;i<500; i++){
var subData = [];
for(var j=1;j<cols; j++){
subData.push(Math.floor((Math.random()*10000)+1));
}
myData.push(subData);
}
function change(val) {
return val;
}
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: fields,
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
//stateId: 'stateGrid',
autoHeight: true,
autoWidth: true,
autoScroll: false,
//containerScroll: false,
columns: colsData,
//height: 100,
//width: 600,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
//stripeRows: false,
//forceFit: false
}
});
});
i'm rendering my grid to a div element so practically i don't use any layout or etc.
<div id="grid-example" class="myDiv"></div>
and the styles:
<style type="text/css">
body{
overflow: visible;
}
.myDiv{
display: block;
/*float: left;*/
overflow: visible;
}
</style>
Here is my browser's screen shot that shows the vertical scroll bar [just like I expected].
THE PROBLEM IS
There is NO horizontal scroll bar and part of columns just cut off from page and there is no way to see the data they are presenting.
i can see that extjs tries to calculate the height and the width for the grids. in case of height it's correct but for width it's not, the calculated width is equals to my browser's width, not to the sum of columns which are in the grid.
I appreciate any suggestion or words from your side, thank you.
any one can help me with that?
I solved this problem by registering a numbers of listeners on viewConfig.viewready, grid.columnresize and etc. So we calculate the total width of columns each time we render a grid or resize/change a visibility of a column. consequently, I expand the grid to the calculated size. something like:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
autoHeight: true,
columns: colsData,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
listeners: {
viewready:function(){
var totalWidth = 0;
Ext.each(grid.columns, function(column, index) {
if (column.isHidden() == false)
totalWidth += column.width;
});
//console.log("Width: " + totalWidth);
grid.setWidth(totalWidth);
}
}
}
,listeners: {
columnresize: function(){
grid.viewConfig.listeners.viewready();
},
columnhide: function(){
grid.viewConfig.listeners.viewready();
},
columnshow: function(){
grid.viewConfig.listeners.viewready();
}
}
});
});
Perhaps you are loking for autoScroll? Don't know what kind of behaviour you want from the question.
The question remains, do you want the grid to have scrollbars, or do you want the div to have scrollbars, or do you want the browser to have scrollbars?
The div is a block level element in HTML. It will automatically fill the browser's width, no more, no less in your example. ExtJS will then fill that div with the grid, making the grid as large as the browser's window, no more. Since you do not allow the grid to have scrollbars, the excess columns are cut off.
If you want the grid to have scrollbars, use autoScroll set to true.
If you want the div to scroll instead, set overflow: auto instead of visible on .myDiv. You would have to specify width on the grid itself too, and make it as wide as the width of the columns.
I recommend letting ExtJS handle the scrollbar as ExtJS can use more efficient rendering if you let it (only render columns and rows that are actually visible).

Titanium - Textarea within a ScrollView

I am trying to create a textarea box within a scrollview. The problem is that it works in iOS, but in Android, when typing multiple lines within the textarea, I cannot scroll up and down to view what I have typed. I know in native Android that you can provide a maximum number of lines and the scrollbars to allow in the view XML file that allows a scrollable textarea within a scrollview, but is there a way to do something similar or a different way of doing this for Titanium?
Here is the code which I am using:
var win = Ti.UI.createWindow({
title: 'Test',
backgroundColor: 'transparent'
});
var view = Ti.UI.createScrollView({
top: 10,
left: 10,
right: 10,
});
var ta = Ti.UI.createTextArea({
top: 5,
left: 5,
right: 5,
height: 400,
backgroundColor: '#AA8BC9'
});
var btn = Ti.UI.createButton({
top: 800,
left: 10,
right: 10,
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
backgroundColor: 'FF00CC',
text: 'OK'
});
view.add(ta);
view.add(btn);
win.add(view);
win.open();
Kibria, This is the problem in old titanium sdk. I also facing this problem with tableview and scrollview in android. I hope this problem can resolve in new titanium sdk.
The alternative solution is you need to set scrollview layout to vertical. and your TextArea height set to auto and then add your button. In this way your scrollview and textarea works perfect for you.

Make div 'fullscreen' onClick?

I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button.
How would I go about this using Javascript/jQuery?
DEMO
$('div').click(function() {
$(this).css({
position:'absolute', //or fixed depending on needs
top: $(window).scrollTop(), // top pos based on scoll pos
left: 0,
height: '100%',
width: '100%'
});
});
$('div.yourdivclass').click(function(){
$(this).css('height','100%').css('width','100%');
})
What have you tried? What didn't work?
Take a look at that:
http://jsfiddle.net/6BP9t/1/
$('#box').on('click',function(e){
$(this).css({
width:"100%",
height:"100%"
});
});
I would do this:
$('#idOfDiv').click(function() {
$(this).css({position:'fixed', height: '100%', width: '100%'});
});​
jsfiffle: http://jsfiddle.net/P6tgH/
$('div').click(function(){
var win = $(window),
h = win.height(),
w = win.width();
$(this).css({ height: h, width: w });
});
http://jsfiddle.net/TQA4z/1/
This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.
Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.
For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.
Toggle Class Demo
Something like
$('#buttonID').click(function() {
$("div > div").toggleClass("Class you want to add");
});

Categories

Resources