How to make a ListView scrollable?

Question

I have a problem with my application. I can't scroll it. The list move down but jump to the top after tapend. I tried to set layout: 'fit', height: '100%' and refresh scroll but it didn't help. View:

Ext.define("Project.view.CatsList", {
  xtype: "cats-list",
  extend: 'Ext.dataview.List',
  requires: [
     'Project.helper.NumberFormatter',
     'Project.store.Cats',
     'Project.model.Project',
     'Project.helper.TemplateFactory',
     'Project.Config',
     'Ext.XTemplate'
  ],

  config: {
     title: "Project",
     cls: "project-cats-list",

     itemCls: "project-cat-list-item",
     itemTpl: Project.helper.TemplateFactory.getCatTemplate(),

Main controller:

   Ext.define("Project.view.BaseNavigationView", {
      xtype: "bas-container",
      extend: 'Ext.navigation.View',

      getAnimationDuration: function(){
         // timeout to complete render and unlock flags
         return 900;
      },

      // override push method
      push: function (view, callback) {
         if(typeof callback == 'function') {
            setTimeout(callback, this.getAnimationDuration());
         }

         return this.add(view);
      },

      removeView: function(view, destroy){
         var index = this.indexOf(view);
         if(index != -1) {
            this.doRemove(view, index, destroy);
         }
      },

Phone controller:

Ext.define('Project.view.phone.Main', {
      extend: 'Project.view.BaseNavigationView',
      xtype: 'main',
      requires: [
         'Project.view.CatList'
      ],
      config: {
         autoDestroy: true,
         fullscreen: true,

         items: [
            {
               xtype: 'category-list'
            }
         ]
      },

      initialize: function() {
         this.callParent(arguments);

         var bar = this.getNavigationBar();
         if(bar && typeof bar.hide == "function") {
            bar.hide();
         }
      },

      getListView: function(){
         return this.down('category-list');
      },

Can someone advice how to fix this issue? Btw in Ext.dataview.List docs application examples have same problem with scrolling.

P.S. I resolve this issue by updating Sencha Cmd and Sencha Touch to last version.

Can you provide us with some more code. It heavily depends on where the ListView is placed. Are you using a viewport? Does the container have a layout? Maybe you can write a Sencha Fiddle to show us what is going wrong: https://fiddle.sencha.com :) — Tarabass, Nov 10 '15 at 19:20
My view based on Ext.dataview.List. And in sencha docs [http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dataview.List](http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dataview.List) same problem with scrolling in example apllications (btw Ext.dataview.List have a fit layout). Sorry I can't write my project on Fiddle cause it used sided API — Alex, Nov 12 '15 at 11:21
You are walking into this bug I guess: http://www.ladysign-apps.com/developer/chrome-43-breaks-sencha-touch-modern-toolkit-and-how-to-fix-it — Tarabass, Nov 12 '15 at 13:28
Update Sencha Cmd and Sencha touch to 2.4.2 helps. Thank you very much! — Alex, Nov 12 '15 at 15:35

How to make a ListView scrollable?

0 Answers0