前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Ext实现滚动条一直处于底部的方法

Ext实现滚动条一直处于底部的方法

作者头像
业余草
发布于 2019-01-21 07:17:26
发布于 2019-01-21 07:17:26
1.1K00
代码可运行
举报
文章被收录于专栏:业余草业余草
运行总次数:0
代码可运行

在我们的实际开发应用中,经常会使用到ext的常用控件textarea。对于一些form表单,录入信息的备注,简介等等信息较多的时候就会使用的textarea。最近在所一个全网拓扑图的时候,以及网络诊断ping,telnet连接测试等等功能的时候,出现了一些比较辣手的问题。就是通过ajax请求后台数据后,把新数据动态的显示到textarea中,textarea的滚动条不会定位到最底部。始终显示在top的位置。经过研究发现,ext对自身的textarea进行了封装,使用table布局。我们根据getCmp()方法获取的控件对象实际上是一个table,这是我们在对table设置它的scrollTop和获取它的scrollHeight属性都会失败。而我们真正需要的是textarea本身,而不是它的父组件table。

这里我把我的实现方法分享给各位网友,使大家少走一些弯路。

代码语言:javascript
代码运行次数:0
运行
复制
<pre name="code" class="javascript">xtype:'container',
region:'center',
layout:'fit',
items:[{
	margin:'10 20 0 0',
	xtype     : 'textarea',
	grow      : true,
	id      : 'textarea_id',
	fieldLabel: '',
	readOnly :true,
	autoScroll : true
}
代码语言:javascript
代码运行次数:0
运行
复制

解决方案1:

代码语言:javascript
代码运行次数:0
运行
复制
var textarea=Ext.getCmp('textarea_id');
textarea.bodyEl.dom.childNodes[0].scrollTop=textarea.bodyEl.dom.childNodes[0].scrollHeight;

解决方案2:

代码语言:javascript
代码运行次数:0
运行
复制
document.getElementById('textarea_id-inputEl').scrollTop = document.getElementById('textarea_id-inputEl').scrollHeight;

经过测试,两种方案都可以使用。 欢迎大家关注我的个人博客!!!!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014年07月28日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
EXT基础
–Ext是一个Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验。
Java架构师必看
2021/03/22
4.4K0
EXT基础
EXT表单
var doSearch=function() { //Ext.Msg.alert('提示','操作已经成功'); location.href ='d.php'; }
Java架构师必看
2021/03/22
6.1K0
EXT表单
JS滚动条触底加载更多
https://codepen.io/klren0312/full/dybgayL
治电小白菜
2020/08/25
8.8K0
JS滚动条触底加载更多
Ext常用组件
表单是客户端和服务器交互的一种重要方式,Ext表单控件在界面体验效果的美观度及功能的全面性上都有着首屈一指的影响力,表面上,表单控件只是添加了一些 CSS样式,但它在数据校验方面非常灵活。
张哥编程
2024/12/17
1080
Ext布局
ExtJS常用的布局都在Ext.layout下,这里几乎涵盖了所有的布局方式(但是值得注意的是通常我们不是直接通过new来创建这些类的对象然后往里面添加控件使用,而是作为控件一个配置属性使用让Ext自动创建对应的类),满足开发者需求。那么我们就其中常用的方式逐一介绍。
张哥编程
2024/12/17
1310
DOM
文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的内容呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是javascript语言规范的规定的核心内容·
Wyc
2018/09/11
8020
DOM
如何在DataGrid里面产生滚动条而不滚动题头
我们在开发的时候一定遇到,使用DataGrid的时候由于不想分页(数据没有那么多)但是又显示不在一页里面,此时我们希望在DataGrid里面出现一个滚动条,可以上下滚动DataGrid里面的数据而不用上下滚动页面,由于写本文的目的是为了说明如何实现,所以对于细节性的问题读者可以自己思考完成(比如:既要分页又要滚动等等)。为了可以滚动DataGrid我们需要一个可以让客户端的Table滚动js脚本(该js代码我是从CodeProject上面下载的),但又不能滚动Table的题头(也就是第一行)。我们都知道Da
阿新
2018/04/13
1.6K0
JavaScript 笔记
    特点:         1. 弱类型          2. 基于对象。(因为面向对象需要具有封装、继承、多态的特征)
卓越笔记
2023/02/18
1.9K0
JavaScript之DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
菲宇
2019/06/13
7070
JavaScript之DOM
用canvas画了个table,手写滚动条
在之前业务有幸接触过复杂的大数据业务渲染,所用的table居然是用canvas以及虚拟列表的方式实现,也有看到飞书的统计信息表就是canvas绘制,一直没太明白为什么要用canvas去做,今天记录一下如何用canvas绘制一个table的简易版,希望看完在项目中能带来一些思考和帮助。
Maic
2022/12/21
5.7K0
用canvas画了个table,手写滚动条
python中selenium操作下拉滚动条方法汇总
UI自动化中经常会遇到元素识别不到,找不到的问题,原因有很多,比如不在iframe里,xpath或id写错了等等;但有一种是在当前显示的页面元素不可见,拖动下拉条后元素就出来了。
kirin
2021/03/18
5.5K0
python中selenium操作下拉滚动条方法汇总
中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践
不知不觉在网易已有三年半,占了一半时间都在与移动端打交道,整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固标准和未知特性多得难以快速掌握。
JowayYoung
2021/02/03
4.4K0
操作滚动条小结:scrollIntoView/animate等方法的来龙去脉
操作滚动条可以通过锚点跳转,JS操作滚动条,与scrollIntoView等方法。对此,我来考古一下。
周陆军博客
2024/01/15
4330
表单脚本
刚开始人们使用JavaScript,最主要的目的之一就是表单的验证,分担服务器处理表单的责任。虽然现流行的大部分提交方式是通过ajax,但了解表单,对于ajax方式也是有重大帮助的!所以,大家不要看轻表单。
奋飛
2019/08/15
4.9K0
Web浏览器滚动方案一览| rAF等
在Web开发中,实现流畅的滚动效果对于提升用户体验至关重要。为了实现这一目标,开发人员可以利用一系列的滚动方案。其中,请求动画帧(requestAnimationFrame,简称rAF)是一种常用的技术。rAF通过优化动画效果的渲染,可以避免卡顿和过度绘制的问题。此外,还有其他滚动方案如CSS动画、滚动事件监听等等,开发人员可以根据具体需求选择合适的方案。通过合理选择和应用这些滚动方案,我们可以提供更加流畅和优化的用户体验。
泯泷、
2024/03/13
1990
移动端H5坑位指南
使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能,使用<input>能快速调用移动设备的的图库/文件。 这些功能方便了页面与系统的交互,关键在于调用格式一定要准确,否则会被移动端浏览器忽略。
饼干_
2022/08/23
3.5K0
深入理解JavaScript与DOM
DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API。Javascript和DOM一般经常作为一个整体,因为Javascript通常都是用来进行DOM操作和交互的。
前端达人
2021/04/01
6610
深入理解JavaScript与DOM
(长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue
Sortable —是一个JavaScript库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。支持Meteor,AngularJS,React,Polymer,Vue,Ember,Knockout和任何CSS库,例如Bootstrap
公众号---人生代码
2020/08/04
7.2K0
(长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue
WEB API教程
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
张哥编程
2024/12/13
1300
WEB API教程
8 个 DOM 功能
你肯定用 addEventListener() 处理过将事件附加到 Web 文档中的元素。通常 addEventListener() 调用看起来像这样:
疯狂的技术宅
2019/06/01
1.9K0
相关推荐
EXT基础
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验