Sencha DataView scrollTo() 最初不工作答案

【问题标题】：Sencha DataView scrollTo() not working initiallySencha DataView scrollTo() 最初不工作
【发布时间】：2012-04-19 11:12:07
【问题描述】：

我正在尝试让数据视图滚动到特定位置。我正在 Chrome 中对此进行测试。我的数据视图中有一个scrollToSelected() 方法，它计算滚动到的位置然后调用：

var scroller = this.getScrollable().getScroller();
scroller.scrollTo(0, y, true);

这在我选择触发我的scrollToSelected() 方法的列表项时有效。但是在第一次显示数据视图时我select(id)，这也触发了scrollToSelected()。变量y 计算正确，但没有发生滚动。所以我在scrollTo()之前的代码中添加了scroller.refresh()，现在它可以工作了。但仅当 Chrome 的开发工具栏打开时。如果我在开发人员工具栏不存在时打开页面，则滚动永远不会发生。有什么想法吗？

编辑： 如果有帮助，请提供更多代码。请原谅任何明显的架构错误——Sencha 对我来说是一个完全不同的编码范例。也就是说，欢迎提出建议。

Ext.define('NC.controller.Cook', {
  extend: 'Ext.app.Controller',

  config: {
    control: {
      stepsPanel: {
        swipe: 'stepSwipe',     // this will eventually call goToStep
        selectStep: 'goToStep' // if the user directly selects a step (by tap), this will be fired
      },
      cookPage: {
        show: 'setup'
      }
    },
    refs: {
      cookPage: 'cookpage',
      stepsPanel: 'stepspanel',
    }
  },

  launch: function() {
    this.current = 0;
    this.last = 0;
  },

  setup: function() {
    var sp = this.getStepsPanel();    
    sp.select(this.current);
  },

  stepSwipe: function(dataview, event, node, options, eOpts) {
    this.last = this.current;

    if (event.direction == 'up') {
      if (this.current < dataview.getStore().data.length-1) {
        this.current += 1;
      }
    } else if (event.direction == 'down') {
      if (this.current > 0) { this.current -= 1; }
    }

    // Select the current step. It will trigger the dataView's select
    // event which will end up calling goToStep.
    dataview.select(this.current);
  },

  goToStep: function(dataview, record) {
    dataview.scrollToSelected();
  }
});


Ext.define('NC.view.cook.Steps', {
  extend: 'Ext.DataView',
  id: 'steps',
  xtype: 'stepspanel',

  config: {
    flex: 1,
    activeItem: 1,
    itemTpl: '{text}',
    selectedCls: 'current',
    itemCls: 'step',
    scrollable: true,
    zIndex: 10,
    listeners: {
      // this is if the user doesn't swipe but directly selects one of the steps
      select: function(dataview, record, eOpts) { dataview.fireEvent('selectStep', dataview, record); }
    }
  },

  initialize: function() {
    // set scrolling behaviours off without turning scrollable off
    this.getScrollable().getScroller().onDragStart = null;

    this.callParent();
    var that = this;
    this.element.on('swipe', function(event, node, options, eOpts) {
      that.fireEvent('swipe', that, event, node, options, eOpts);
    });
  },

  scrollToSelected: function() {    
    //var toTop = Ext.get(this.element).down(".current").getY();
    var thisEl = Ext.get(this.element);
    var current = thisEl.down(".current");
    var prev = current;
    var y = 0;

    do {
      prev = prev.prev('.step');
      if (prev) { y += prev.getHeight(); }
    }
    while(prev);

    y = y - ((thisEl.getHeight()-current.getHeight())/3) + 5000;

    var scroller = this.getScrollable().getScroller();
    scroller.refresh();
    scroller.scrollTo(0, y, false);
  }
})

编辑 2：

鉴于“时间问题”的建议，我用计时器将select() 包裹在setup 函数中，如下所示：

setTimeout(function() { sp.select(0); }, 10);

现在似乎可以工作了！

【问题讨论】：

听起来像是时间问题。你能发布一个sn-p的代码吗？或者也许通过在滚动条的scrollTo 中设置断点来调试框架代码，看看出了什么问题。也许轴被禁用了。
抱歉回复慢，我已经离开了。我仍然很难调试这个，所以我会尝试在上面发布更多细节。谢谢。

标签： sencha-touch extjs sencha-touch-2

【解决方案1】：

我为此使用了 'maxpositionchanged' 事件，只要列表的滚动条的高度发生变化（因此加载列表时）就会触发该事件

me.getList().getScrollable().getScroller().on('maxpositionchange', function(s, max) {
            if (!initialScrollDone && max.y >= me.ROW_HEIGHT*9) {
                s.scrollTo(0, 120);
                initialScrollDone = true;
            }
        });

ROW_HEIGHT 是我自己指定的。

【讨论】：

【解决方案2】：

鉴于 rdougan 提出的“时间问题”的建议，我将 select() 用计时器包裹在 setup 函数中，如下所示：

setTimeout(function() { sp.select(0); }, 10);

它现在可以工作了，但我不知道它有多强大。

【讨论】：