Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-15942

TableView jerks with Window Swipe gesture

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Critical
    • Resolution: Duplicate
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Android
    • Environment:

      Am using 3.1.3.GA SDK, Alloys and 2.3.3 Android Emulator and tested in 4.0.4 Sony Xperia Android Mobile and 4.0 Karbonn A9+ Android Mobile.

      Description

      I created a Window with two Views, One will always be visible and the other will be visible when swiped in right-side direction(Sliding Menu) by moving the main visible view right side 70% of the total width. My visible view consists a TableView with some data requires scrolling. After I add swipe event, TableView moving very slowly and stops. If I remove swipe, its working smooth.

      Expected Result:

      • TableView scrolls smoothly

      Actual Result:

      • TableView jerks, stops and moving and stops
      • When I remove swipe event, its working smoothly and got expected result.

      Note: My rows are custom and for sample I include the following code.

      Sample Code:

      index.xml

      <Alloy>
      	<Window class="container">
      		<Require src="tableView" id="tbl"></Require>
      		<Require src="slidingMenu" id="sld"></Require>
      	</Window>
      </Alloy>
      

      index.tss

      ".container": {
      	backgroundColor:"white",
      	width: Ti.UI.FILL,
      	height: Ti.UI.FILL
      }
      

      index.js

      $.index.addEventListener('swipe', function(e){
      	if(e.direction == 'right'){
      		var anim = Ti.UI.createAnimation({
      			left: '70%',
      			duration: 100
      		});
      		$.tbl.tableView.animate(anim);
      	}else if(e.direction == 'left'){
      		var anim = Ti.UI.createAnimation({
      			left: 0,
      			duration: 100
      		});
      		$.tbl.tableView.animate(anim);
      	}
      });
      $.index.open();
      

      tableView.xml

      <Alloy>
      	<TableView id="tableView">
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      		<TableViewRow title="swipe window"></TableViewRow>
      	</TableView>
      </Alloy>
      

      tableView.tss

      '#tableView': {
      	backgroundColor: '#000',
      	width: '100%',
      	height: '100%',
      	zIndex: 2
      },
      'TableViewRow': {
      	className: 'rows'
      }
      

      tableView.js
      //empty file

      slidingMenu.xml

      <Alloy>
      	<View id="slidingMenu">
      		<Label>Testing</Label>
      	</View>
      </Alloy>
      

      slidingMenu.tss

      '#slidingMenu': {
      	backgroundColor: 'red',
      	width: '100%',
      	height: '100%',
      	zIndex: 0
      }
      

      slidingMenu.js
      //empty file

      I included the state of the sample app image after swiped right and normal view. I think I provided all required. Please help me with this problem, thanks appcel.

        Attachments

          Activity

            People

            • Assignee:
              emerriman Eric Merriman
              Reporter:
              jaddict Gowtham
            • Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-18017
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code