How i can add a table view in a scroll view?

StackOverflow https://stackoverflow.com/questions/23242298

Question

I am adding a table view in a scroll view, its smoothly working in case of iOS but in case of Android the table view not scrolls.

i have describe the code below which describe my problem.. Suggest me any answer which can help to solve my problem.

var rows = [];

var win = Ti.UI.createWindow({
    backgroundColor:'white'
});

var scrollableView = Ti.UI.createScrollView({
    top : 0,
    contentWidth : '100%',
    contentHeight : 'auto'
});

var fruit = Ti.UI.createView({
    top : 40,
    width : '70%',
    height : 20,
    left : 10,
    backgroundColor:'#000'
});
var fruitLabel = Ti.UI.createLabel({
    text : "Fruit list",
    font:{
        fontSize : 15,
        fontWeight : 'bold'
    },
    color : 'red'
});
fruit.add(fruitLabel);
var fruitTableView = Titanium.UI.createTableView({
    top : 70,
    width : 200,
    height : 150,
    left : 80,
    right : 20,
    separatorColor : 'transparent'
});
rows = [];
for(var i=0; i<20; i++){
    rows.push(Titanium.UI.createTableViewRow({
        title:'fruit ' + String(i),
        color : '#000'
    }));
};
fruitTableView.setData(rows);

var veg = Ti.UI.createView({
    top : 250,
    width : '70%',
    height : 20,
    left : 10,
    backgroundColor:'#82C6E8'
});
var vegLabel = Ti.UI.createLabel({
    text : "Veg list",
    font:{
        fontSize : 15,
        fontWeight : 'bold'
    },
    color : 'red'
});
veg.add(vegLabel);
var vegTableView = Titanium.UI.createTableView({
    top : 280,
    width : 200,
    height : 150,
    left : 80,
    right : 20,
});
rows = [];
for(var i=0; i<20; i++){
    rows.push(Titanium.UI.createTableViewRow({
        title:'veg ' + String(i),
        color : '#000'
    }));
};
vegTableView.setData(rows);


var grains = Ti.UI.createView({
    top : 460,
    width : '70%',
    height : 20,
    left : 10,
    backgroundColor:'pink'
});
var grainLabel = Ti.UI.createLabel({
    text : "Grains list",
    font:{
        fontSize : 15,
        fontWeight : 'bold'
    },
    color : 'red'
});
grains.add(grainLabel);
var grainsTableView = Titanium.UI.createTableView({
    top : 490,
    width : 200,
    height : 120,
    left : 80,
    right : 20,
});
rows = [];
for(var i=0; i<50; i++){
    rows.push(Titanium.UI.createTableViewRow({
        title:'grain ' + String(i),
        color : '#000'
    }));
};
grainsTableView.setData(rows);

scrollableView.add(fruit);
scrollableView.add(fruitTableView);
scrollableView.add(veg);
scrollableView.add(vegTableView);
scrollableView.add(grains);
scrollableView.add(grainsTableView);

win.add(scrollableView);
win.open();
Était-ce utile?

La solution

Thanks guys for your reply, i found the right way to implement it with the help of @Surajkochale .

Here is the solution of my problem if i add these lines in my code and it works well..

fruitTableView.addEventListener('touchstart', function(){
    scrollableView.canCancelEvents = false;
});
fruitTableView.addEventListener('touchend', function(){
    scrollableView.canCancelEvents = true;
});
fruitTableView.addEventListener('touchcancel', function(){
    scrollableView.canCancelEvents = true;
});


vegTableView.addEventListener('touchstart', function(){
    scrollableView.canCancelEvents = false;
});
vegTableView.addEventListener('touchend', function(){
    scrollableView.canCancelEvents = true;
});
vegTableView.addEventListener('touchcancel', function(){
    scrollableView.canCancelEvents = true;
});


grainsTableView.addEventListener('touchstart', function(){
    scrollableView.canCancelEvents = false;
});
grainsTableView.addEventListener('touchend', function(){
    scrollableView.canCancelEvents = true;
});
grainsTableView.addEventListener('touchcancel', function(){
    scrollableView.canCancelEvents = true;
});

Autres conseils

you need to add tableview in a view...

fruit.add(fruitTableView);
scrollableView.add(fruit);

veg.add(vegTableView);
scrollableView.add(veg);

grains.add(grainsTableView);
scrollableView.add(grains);

you can check for contentHeight : Ti.UI.SIZE, it worked for me

try this 

var tableView = Titanium.UI.createTableView({
    bubbleParent:false,
});

not smoothly, but it work.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top