首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Ext Touch(Sencha Touch)的Ext.Panels上处理滚动事件?

在Ext Touch(Sencha Touch)的Ext.Panels上处理滚动事件,可以通过以下步骤实现:

  1. 创建一个Ext.Panel对象,并设置scrollable属性为true,以启用滚动功能。
代码语言:javascript
复制
var panel = Ext.create('Ext.Panel', {
    scrollable: true,
    // 其他配置项
});
  1. 在Ext.Panel对象上添加scroll事件监听器,以便在滚动时执行相应的操作。
代码语言:javascript
复制
panel.on('scroll', function(panel, x, y) {
    // 处理滚动事件的逻辑
});

在scroll事件的回调函数中,可以根据需要执行各种操作,例如更新UI、加载更多数据等。

  1. 可以使用Ext.util.DelayedTask来延迟处理滚动事件,以避免频繁触发。
代码语言:javascript
复制
var task = Ext.create('Ext.util.DelayedTask', function() {
    // 处理滚动事件的逻辑
});

panel.on('scroll', function(panel, x, y) {
    task.delay(200); // 延迟200毫秒执行滚动事件的处理逻辑
});

这样可以确保滚动事件在用户停止滚动一段时间后才被处理,提高性能和用户体验。

总结:

在Ext Touch(Sencha Touch)的Ext.Panels上处理滚动事件,需要创建一个具有scrollable属性的Ext.Panel对象,并添加scroll事件监听器来处理滚动事件。可以使用Ext.util.DelayedTask来延迟处理滚动事件,以提高性能和用户体验。

推荐的腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ext JS 6 新特性和工具

以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext JS 和 Sencha Touch所有组件, 只用一个代码基即可,满足所有设备用户体验...通过使用共同核心,SenchaTouch UI 组件支持了MVVM、数据绑定、甚至鼠标点知支持,如果你想在桌面使用。特别在如图标、网格等内容也有所增强。...•Sencha枢轴网格透视网格插件,使您能够快速和容易Ext JS应用程序添加强大分析功能。你可以构建应用程序,让用户发现大量在你Ext JS网格数据关键见解。...•Sencha CmdExt JS 6每一个主要版本,我们更新了Sencha CMD并使其更容易和更快开发建设及其应用。...JetBrains插件启用自动完成和允许开发者快速访问配置,混合组件,属性,事件,方法,和更多

1.3K50

sencha touch结合phonegap开发android下文件浏览器

大家好,今天我给大家介绍一下通过两个新html5技术sencha touch 和phonegap来开发android应用。...首先,众所周知,sencha touch是结合了extjs和jquery mobile这两个javascript神器而开发一个js库,其诞生目的就是为了使webapp成为nativeapp,甚至使其更像...好了,现在我通过一个文件浏览器例子来说明一下如何利用sencha touch和phonegap来开发本地应用。...首先写好sencha tocuh代码,这里我就不多说,大家可以参考sencha官网sencha touch API,这里用了一个container,其布局为card,动画为slide,有两个item...根据phonegap官网开始指导,我们首先要把phonegap库加载,phonegap库包括js和jar,可以到以下地址下载:phonegap与sencha touchjs库,phonegap1.8

97850
  • touch 系列事件触发滚动响应更快

    这些都是很有用特性,能使处理touch 系列)事件过程中,不会妨碍页面的正常滚动,然而开发者们有时候会觉得它们难以理解,更不会去使用。...我们相信这会极大地提高用户体验,也不会网站造成多大影响。 在极个别例子下,这会导致意外滚动。可以通过在意外滚动发生元素添加CSS属性touch-action: none 来阻止滚动发生。...当你注册 touch 系列事件监听器时,加入{passive: true}对象作为第三个参数后,浏览器就认为你不会在事件处理函数中调用 preventDefault(),它就可以安全地让页面滚动,不再等待事件处理函数执行完...在浏览器中正确地使用 touch-action 是已经是非常重要了, PC 端中 Edge 支持 Pointer 事件,不支持 Touch 事件。...只有在为了阻止之后默认行为(将要触发click事件)时,才应该在touchend事件处理函数中调用preventDefault()。

    95020

    移动端touch事件处理

    在iPhone 3Gs发布时候,其自带移动Safari浏览器就提供了一些与触摸(touch)操作相关事件。随后,Android浏览器也实现了相同事件。...触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕滑动时候或者是从屏幕移开时候出发。...在这个事件发生期间,调用preventDefault()事件可以阻止滚动。  touchend事件:当手指从屏幕离开时候触发。  touchcancel事件:当系统停止跟踪触摸时候触发。...TouchList是一个只读类数组对象,它表示在当前touch事件中,与触摸屏接触点个数,比如:如果你当前是三根手指在同时在触摸屏,那么每一根手指都会有一个相对应touch对象,来记录对应手指操作相关信息...参考文章:http://www.zhangyunling.com/235.html(touch事件简要探讨一下移动端 touch 事件处理几个坑,以及相应简单处理方法。

    1.7K20

    探究 css touch-action 属性

    See 这样bug 然后找了一通发现可以用 *{touch-action:none}这个方法 用法是禁用元素(及其不可滚动后代)所有手势,以使用自己提供拖放和缩放行为(地图或游戏表面...; touch-action: unset; 默认情况下,平移(滚动)和缩放手势由浏览器专门处理。...使用 Touch_events 应用程序通过调用 preventDefault() 禁用浏览器处理手势,但也应使用触摸操作确保浏览器在调用任何事件侦听器之前,了解应用程序意图。...值 auto 当触控事件发生在元素时,不进行任何操作。 none 当触控事件发生在元素时,不进行任何操作 pan-x 启用单指水平平移手势。...示例 最常见用法是禁用元素(及其不可滚动后代)所有手势,以使用自己提供拖放和缩放行为(地图或游戏表面) #map { touch-action: none; } 另一种常见模式是使用指针事件处理水平平移图像轮播

    1.8K10

    【IOS开发基础系列】UIScrollView专题

    那么这里就有疑问了,既然该属性设置未来NO了,那么岂不是UIScrollView不能处理任何事件了,那么为何在子视图上快速滚动时候,UIScrollView还能移动那。...而前面所说时,中断touch-down事件,和取消touch事件是俩码事,所以当快速在子视图上移动时候,当然可以滚动。...首先了解下UIScrollView对于touch事件接收处理原理:UIScrollView应该是重载了hitTest 方法,并总会返回itself 。...所以所有的touch 事件都会进入到它自己里面去了。内部touch事件检测到这个事件是不是和自己相关,或者处理或者除递给内部view。...(当你touch一个table时候,直接scrolling,你touch那行永远不会highlight。)

    51030

    移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件时候,通常会出现300ms左右延迟。...产生原因 移动浏览器支持双击缩放操作,以及IOS Safari 双击滚动操作,是导致300ms点击延迟主要原因。...预备知识:移动端点击一个元素触发事件顺序 以下是四种touch和click事件 touchstart: //手指放到屏幕时触发 touchmove: //手指在屏幕滑动式触发...指针事件是一个新 web 事件系列,相应规范旨在使用一个单独事件模型,对所有输入类型,包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等,进行统一处理。...指针事件和css touch-action:新属性,可能存在浏览器兼容问题,仅为解决点击延迟问题儿引入一整套指针事件有点过了。

    2.7K21

    jimojianghu

    在以前,如果要禁止移动端设备触摸屏,手指缩小放大功能,都会想到使用viewport 来处理。...此外,对 document 处理了滚轮事件后,因为该事件会传播冒泡,所以需要注意页面上其他子元素——如果有滚动条之类,需要在子元素阻止冒泡,不然后滚动会失效。...css 处理 只要在页面上使用css样式 touch-action: none,就能禁止web在手机或平板缩放了。...笔记本触摸板双指滑动,将响应滚轮事件,因此可以监听该事件,禁止触摸板手指缩放界面。 但需要注意滚轮默认事件会导致子元素滚动失效,这时候就要在子元素阻止相同事件冒泡。...passived 实际就是告诉浏览器,某个事件监听是否会使用 preventDefault 来阻止默认行为,便于浏览器优化性能。特别是浏览器优化页面滚动性能,可以让页面滚动更顺滑。

    3.8K00

    Ext JS 4预览:更快、更简单、更稳定

    Ext JS 4预览版:更快、更简单、更稳定 上周在SanFrancisco看,在哪里,我们很激动来自全球500多Sencha开发者(放到以前应该叫ExtJs开发者)。...当我们正处理会议视频,我想向你介绍我们旗舰产品ExtJS4.0下一个阶段发展方向最激动忍心一些特性。...这个全新图表包可以在所有我们支持浏览器(包括IE6)运行,并且和框架其他部分进行了高度整合。我们将在未来一周分享图表更多详细内容,我们为提供给所有我们开发者这些新特性而兴奋。 ?...ExtJS4data包可以和Sencha Touch,所以你当即就可以在你应用程序中使用它了。我们有几个博客发布了介绍它帖子。...这就使我们能够创建一些在创建应用程序时所需要难以置信工具来帮助自动化设计和维护。使用新架构创建应用变得容易得难以置信,你可以偷偷看一下Sencha Touch微博和Kiva示例。

    2.4K60

    第134天:移动web开发一些总结(二)

    say no 弹性滚动 拉刷新 tap事件基础 touch触摸事件 下拉加载 300ms: 移动web页面上click事件响应都要慢300ms 用300ms判断是单击还是双击 (1) tap基础事件...,(但是不可避免原生标签click事件a,input)。...(不常用)eg:滑动页面时来了一个电话或者其他系统事件 除常见事件属性外,触摸事件包含专有的触摸属性: touches:跟踪触摸操作touch对象数组 targetTouches:特定事件目标的touch...但注意:event.preventDefault()会导致默认行为不发生,scroll,导致页面不滚动!如果页面带有滚动条,就需要考虑更换解决方案。...移动web页面也是拥有这样能力,但滚动有几种情况需要考虑: body层滚动:(系统特殊化处理) 自带弹性滚动,overflow:hidden失效,GIF和定时器暂停。

    1.8K10

    10-移动端开发教程-移动端事件

    在前端移动Web开发中,有一部分事件只在移动端产生,触摸相关事件。接下来给大家简单总结一下移动端事件。 1....touch相关事件跟普通其他dom事件一样使用,可以直接用addEventListener来监听和处理。...最基本touch事件包括4个事件: touchstart: 当在屏幕按下手指时触发 touchmove: 当在屏幕移动手指时触发 touchend: 当在屏幕抬起手指时触发...touchcancel 当一些更高级别的事件发生时候(电话接入或者弹出信息)会取消当前touch操作,即触发touchcancel。...touchmove事件和鼠标的mousemove事件一样都会多次重复调用,所以,事件处理时不能有太多耗时操作。不同设备,移动同样距离 touchmove 事件触发频率是不同

    6.4K70

    10-移动端开发教程-移动端事件

    在前端移动Web开发中,有一部分事件只在移动端产生,触摸相关事件。接下来给大家简单总结一下移动端事件。 1....touch相关事件跟普通其他dom事件一样使用,可以直接用addEventListener来监听和处理。...最基本touch事件包括4个事件: touchstart: 当在屏幕按下手指时触发 touchmove: 当在屏幕移动手指时触发 touchend: 当在屏幕抬起手指时触发 touchcancel...当一些更高级别的事件发生时候(电话接入或者弹出信息)会取消当前touch操作,即触发touchcancel。...touchmove事件和鼠标的mousemove事件一样都会多次重复调用,所以,事件处理时不能有太多耗时操作。不同设备,移动同样距离 touchmove 事件触发频率是不同

    6.8K80

    Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办?

    原因:google浏览器为了最快速相应touch事件,做出改变。 历史:当浏览器首先对默认事件进行响应时候,要检查一下是否进行了默认事件取消。...具体情况: 从 chrome56 开始,在 window、document 和 body 注册 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。...: 如果在以上这 3 个元素 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ,会被浏览器忽略掉,并不会阻止默认行为。...CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    78610
    领券