今天客户提了一个需求,滚动条自动定位问题。大致如下:
树控件菜单中 ,有很多节点,当打开较多的时候,会显示不下,出现滚动条,用户展开一个靠下的节点时候,往往要先拉动滚动条,才能看到展开节点的叶子节点。客户希望在展开节点的时候,滚动条会自动定位,不需要拉动就能看到下面的子节点。
查找相关代码发现 滚动条是跟随焦点走的,焦点在哪,滚动条默认就向哪滚动,点击父节点或者展开按钮时候,是当前节点获取焦点,故滚动条只会滚动到当前节点处,要想实现用户的需求,最好是当前展开节点的最后一个节点获取焦点,查找ext api 发现treenode无获取焦点的方法,查看其元代吗,发现 treenode 的获取焦点 要通过treenodeui获取,故修改代码如下: //监听树的展开事件,将焦点转移到当前节点的最后一个子节点
expandnode :function(node){
var curr = node.lastChild ;
if(curr){
curr.getUI().focus();
}
},
// 监听click事件,同样将焦点转移到当前节点的最后子节点
'click':function(node){
if(node.isLeaf()){
openTab(node);
}else{
node.expand(false,true,function(temp){
var curr = temp.lastChild ;
if(curr){
curr.getUI().focus();
}
});
//树展开的时候 ,单击节点,使滚动条自动定位到相应的位置
Ext.getCmp('treeAccordion').doLayout();
}
},
通过上述方法,使树的滚动条自动滚动,系统的易用性得到了增强。
分享到:
相关推荐
在EXTJS中,自动补全(Autocomplete)功能通常用于提升用户输入的效率,它能够根据用户输入的字符快速提供匹配的建议列表。这个功能在许多应用中都非常常见,例如搜索框、表单字段等。EXTJS并没有直接提供一个名为...
在ExtJS 4.0版本中,它提供了一系列功能,包括表格面板(Grid Panel)的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中,表格面板允许用户动态隐藏或显示列,以...
在开发过程中,有时需要根据数据库结构或者业务需求自动生成相应的ExtJS代码,以提高开发效率和代码一致性。下面将详细解释如何使用ExtJS进行代码自动生成,以及各组件类型的中文解释。 1. **数据库字段的映射** ...
Extjs Ext.Net自动生成工具:WebMisDeveloper 适当降低了对使用者的要求,通过WebMisDeveloper生成的系统更接近实际的WebMIS系统,减少了对系统的修改量,只需要进行业务逻辑的编码,WebMisDeveloper会自动生成一套...
在EXTJS中,"Extjs自动最大化panel"是一种高级布局技术,它允许用户创建一个能够自动适应并填充其容器的面板(Panel)。这种特性对于构建响应式和自适应的用户界面至关重要,尤其在现代Web应用中,用户期望界面能够...
解决如下两个Bug: Bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录...Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条向右越多,偏移越明显。
升级了,大家不要下载这个了,下载我的资源里的的(MVC+Extjs架构WebMis自动生成) 只要你配置了数据库,配置了表,配置了功能菜单,每个菜单对应一个表,就能生产一个基本的系统, 基本系统:能对你的表进行CRUD,...
**MVC+Extjs 架构WebMis自动生成实例** 在现代Web开发中,MVC(Model-View-Controller)模式、ExtJS框架以及WebMis系统设计是关键组成部分。本实例将深入探讨如何利用这些技术构建高效、可维护的Web应用。 **一、...
Extjs4.1自动提示,放在\build目录下,原有sdk.jsb3里边的路径有问题
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...
【Extjs--OA 自动办公系统】是一款基于ASP.NET技术和EXTJS前端框架开发的办公自动化系统,采用典型的三层架构设计,旨在提供高效、便捷的办公流程管理。此系统的实现涉及了多个关键知识点,下面将详细阐述这些技术...
在使用ExtJS开发Web应用程序时,经常会遇到在GridPanel中数据列过多,导致横向滚动条自动出现的问题。这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽,因此浏览器会自动显示横向滚动条以便用户查看全部数据...
Bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录整个grid就会往左移,右边空出一部份空白。 Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条...
ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...
- 组件分类:如窗口、面板、表单等。 - 组件生命周期:创建、渲染、销毁等。 - 组件渲染方法:`render`方法用于将组件渲染到页面上。 #### 9. 常用组件 Extjs提供丰富的组件库,包括: - 按钮、日期选择器、...
ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...
保存并关闭属性窗口,现在你应该能在Eclipse的编辑器中看到对ExtJS类和方法的自动提示。尝试在你的JavaScript文件中输入一些ExtJS相关的代码,看看是否有智能提示出现。 7. **优化编码体验**: 为了进一步提升...
ExtJs 4 用了一段时间了,今天研究了下ExtJs4的MVC机制,感觉还挺好,建议大家尝试,所以就写了一个demo,帮助那些对ExtJs还不是很懂,或者想用ExtJs4却又不知道怎么做好的朋友。。。多余话不说了大家如果有什么不...