ExtJS中点击上下按钮后如何设置面板滚动或窗口焦点？

嘿，我看你已经搞定了分页按钮的点击逻辑，但切换上下页后页面不滚动的问题确实有点影响体验。这里有几个实用的方案，结合你的代码来调整就行：

方案1：让结果面板滚动到顶部 #

如果你的搜索结果是放在mypanel里的，直接控制面板的滚动区域回到顶部是最直接的方式：

// 让mypanel的内容区域滚动到顶部
mypanel.getScrollable().scrollTo(0, 0);

如果你的面板本身不在浏览器当前视口内，还可以让整个窗口滚动到面板的位置：

// 让浏览器窗口滚动到mypanel所在位置
Ext.fly(mypanel.el).scrollIntoView();

方案2：聚焦到关键元素（搜索框/结果项） #

如果想让用户的注意力回到搜索框，或者结果列表的第一个项，可以这样做：

• 聚焦到搜索框（假设搜索框的reference是searchField）：

  var searchField = this.lookupReference('searchField');
  if(searchField) {
      searchField.focus();
  }
  

• 聚焦到结果列表的第一个项（如果是Grid组件）：

  var resultGrid = mypanel.down('grid');
  if(resultGrid && resultGrid.getStore().getCount() > 0) {
      resultGrid.getSelectionModel().select(0);
      resultGrid.view.focusRow(0);
  }
  

结合你的代码修改示例 #

把滚动逻辑加到你现有的onnextClick方法里，完整代码如下：

onnextClick: function () {
    var mypanel = this.lookupReference('mypanel'),
        header = mypanel.getHeader();
    
    header.setStyle('background-color', '#FFEFBB');
    header.el.down('div.demo-title').setStyle('background-color', '#ccc');
    
    // 添加滚动到面板顶部的逻辑
    mypanel.getScrollable().scrollTo(0, 0);
    
    // 如果你需要窗口滚动到面板位置，替换上面的代码为：
    // Ext.fly(mypanel.el).scrollIntoView();
    
    // 保留你原有的聚焦title逻辑（如果需要的话）
    header.el.down('div.demo-title').focus();
}

另外，如果你的分页是切换整个页面的内容（而非面板内滚动），直接用原生JS让窗口回到顶部更简单：

window.scrollTo(0, 0);

内容的提问来源于stack exchange，提问作者sandy