Search code examples
javascripttitaniumtitanium-mobileappcelerator-titanium

Problem: synchronized scrolling of two tables in app


Heyhoo,

The following problem: we have an evaluation in our app that consists of two tables. Table 1 shows the days with dates, table 2 shows related records in several columns.

Both tables are displayed side by side. We would like to ensure that when table 1 is scrolled down or up, table 2 also scrolls to the same Y position but retains the previous X position.

The following code section is our attempt. Our aim is to give us the Y coordinates of the current scroll position. Unfortunately the log always gives us the message "[INFO] Y valueundefined". We don't understand why.

// -------------------------------------------------------
// Tabellen
// -------------------------------------------------------

    var scroll = Ti.UI.createScrollView({
        scrollType:'vertical',
        top:105, bottom: 115,
        width:Ti.UI.SIZE,
    }); safeAreaView.add(scroll);

    var hv = Ti.UI.createScrollView({
        top:0,
        scrollType:'vertical',
        width:Ti.UI.SIZE,
    }); scroll.add(hv);

    var Dtm =Ti.UI.createTableView({ //Tabelle für die Tage
        left:0,
        Width:170,  
        backgroundColor:'#fff',
        data:[],
    });
    hv.add(Dtm);
    
    Dtm.addEventListener('scroll',function(){
        let scroll = this.y;

        //let Abstand =Dtm.pageYOffset;
        Ti.API.info("Y Wert"+ scroll);
    })

    var sv = Ti.UI.createScrollView({ //Tabelle für den restl. Inhalt
        left:170,
        right:0,
        contentHeight: Ti.UI.SIZE,
        width: Ti.UI.SIZE,
        offsetPosition: -100,
        scrollType: 'horizontal',
        //zIndex:100
    });
    scroll.add(sv);

    var zeitnachweisViewWidth = -80;

    var zeitnachweisView = Ti.UI.createTableView({ //Gemeinsame Tabelle
        top:0,
        left:0,
        bottom:0,
        width: zeitnachweisViewWidth,
        backgroundColor:'#fff',
        data:[]
    });
    sv.add(zeitnachweisView);

Do any of you have an idea for a solution or have you ever encountered a similar problem? We would be very happy about help.

With "scroll" we tried to display Y values ​​of the current position. With a Y value, we then plan to run this as a synchronized value to the other table so that they scroll the same way


Solution

  • check https://titaniumsdk.com/api/titanium/ui/tableview.html#events_scroll and you can see that you have to log

    Dtm.addEventListener("scroll", function(e){
        console.log(e.contentOffset)
    })
    

    to get the x and y coordinates.

    Full example:

    var win = Ti.UI.createWindow();
    var table = Ti.UI.createTableView({});
    
    win.add(table);
    win.open();
    
    var sectionFish = Ti.UI.createTableViewSection({ headerTitle: 'Fish' });
    for (var i=0; i<100;++i){
        sectionFish.add(Ti.UI.createTableViewRow({ title: 'Cod' }));
    }
    
    table.insertSectionBefore(0, sectionFish);
    table.addEventListener("scroll", function(e){
        console.log(e.contentOffset)
    })