`
ggpp224
  • 浏览: 12399 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Extjs 控制组件滚动条事件(一)

阅读更多

Extjs 控制组件滚动条事件

html:

<div id="dv" style="width:400;height:300;border:1px solid;overflow:auto">
	......内容...足够多使滚动条出现...
</div>
<div id="view"></div>

 

js:

 

// 对单个Ext.element的滚动条控制,利用Ext.Element下的scroll事件来实现
// 对组件的话,可以先找到组件中放置滚动条的element来添加事件
Ext.onReady(function(){
	var dv = Ext.get('dv');
	dv.on('scroll',view);

	function view(e){
		Ext.fly('view').insertHtml('beforeEnd','<p>'+dv.dom.scrollTop+'</p>');
	}
});

 

分享到:
评论

相关推荐

    Extjs4.0 列隐藏和滚动条动态加载

    在ExtJS 4.0版本中,它提供了一系列功能,包括表格面板(Grid Panel)的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中,表格面板允许用户动态隐藏或显示列,以...

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    它支持标题、工具栏、滚动条等特性。 2. **Grid(网格)**: Grid组件用于展示表格数据,支持排序、分页、选择行等功能,是数据展示的重要组件。 3. **Form(表单)**: ExtJS提供了多种表单组件,如文本框、下拉框...

    Ext grid panel 滚动条位置不变

    在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前查看的位置,提供更好的用户体验。 ####...

    Extjs gridpanel 出现横向滚动条问题的解决方法

    在使用ExtJS开发Web应用程序时,经常会遇到在GridPanel中数据列过多,导致横向滚动条自动出现的问题。这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽,因此浏览器会自动显示横向滚动条以便用户查看全部数据...

    ExtJS 事件处理 动态载入

    ExtJS 提供了一个完整的框架,包括丰富的UI组件、数据绑定机制、布局管理以及强大的事件模型。这使得开发者能够创建功能丰富的Web应用,具有桌面级的用户体验。事件处理是ExtJS中非常关键的一部分,它允许用户与UI...

    Extjs实现的聊天室

    这个组件可能包含输入框(供用户输入消息)、发送按钮、以及一个滚动条支持的列表或网格(显示聊天记录)。使用ExtJS的FormPanel和TextArea组件可以轻松创建这些元素,并通过监听事件来处理用户的输入和发送行为。 ...

    Extjs4 图片浏览器

    这款图片浏览器利用了ExtJS4的组件化、数据绑定和事件处理等特性,为用户提供了一个交互性强、功能丰富的图片浏览体验。 在实现这个图片浏览器的过程中,开发者可能使用了以下核心ExtJS4组件和技术: 1. **Panel...

    Extjs grid panel自带滚动条失效的解决方法

    总的来说,EXTJS Grid Panel滚动条失效的问题可以通过调整组件配置和列宽管理来解决。理解Grid Panel的布局和滚动逻辑是找到问题根源的关键。在实际开发中,遇到此类问题时,可以尝试上述解决方案,并根据具体情况...

    ExtJS_可编辑Grid进度条

    4. 嵌入式滚动条:这里的“嵌入式滚动条”可能指的是在Grid列内部实现的滚动条,而不是整个Grid的滚动条。这需要我们自定义列渲染器,使得进度条可以随数据的滚动而显示和隐藏。 实现这个功能的步骤大致如下: 1. ...

    多颜色风格的EXTJS插件皮肤.rar

    2. 图像资源:如按钮、图标、滚动条等组件的图片,用于实现更精细的图形效果。 3. SASS或LESS源码:高级皮肤可能提供SASS或LESS源码,这是一种预处理器语言,可以方便地进行颜色和样式调整。 使用这些皮肤资源时,...

    Extjs面板和布局

    在Extjs中,**面板(Panel)**扮演着极其重要的角色,它不仅作为其他组件的容器,而且还是实现页面布局的关键手段之一。面板类似于Delphi、VisualBasic或JavaSwing中的面板概念,提供了丰富的布局选项和高度灵活的...

    Highstock与ExtJs结合使用

    接着,创建一个ExtJS的容器组件,比如面板(Panel),并在其配置中指定使用Highstock的图表类型。 在配置Highstock时,你需要定义系列(series)、x轴(xAxis)和y轴(yAxis)的详细信息。系列通常对应于你要展示的...

    Extjs Black Theme

    1. **CSS 文件**:在 `css` 文件夹中,通常包含了一系列的CSS样式表文件,这些文件定义了ExtJS组件在黑主题下的样式。例如,`ext-theme-neptune-all.css` 可能是基础主题文件,而 `ext-theme-black.css` 则是覆盖并...

    ExtJS笔记---Grid实现后台分页

    在ExtJS中,Grid组件通过与服务器端交互来实现这一功能。 首先,我们需要理解ExtJS Grid的基本结构。Grid由Store(数据存储)、Columns(列定义)和View(视图)三部分组成。Store负责管理数据,Columns定义显示的...

    ext js calendar 日历

    1. **MonthView** - 这个视图展示一整个月的日程,没有滚动条,大小自适应于CalendarPanel。它基于box layout实现,不包含滚动功能。 2. **DayView** - 包含DayHeaderView和DayBodyView。DayHeaderView显示全天事件...

    extjs_ux_LockingGridPanel-update6

    锁定列功能通过引入LockingGridPanel实现,这是一个增强版的GridPanel,它允许我们将表格分为两个或更多的部分,每个部分有自己的垂直滚动条。锁定的部分始终保持在屏幕左侧,而可滚动的部分则包含未锁定的列。这样...

    extjs 3.2.1 项目

    - **Panel**:基本的容器组件,可以容纳其他组件,具有标题、工具栏、滚动条等功能。 3. **项目开发**: - **MVC架构**:ExtJS 3.2.1引入了Model-View-Controller模式,有助于代码组织和分离关注点。 - **数据...

    Extjs MultiselectItemSelector

    "Extjs MultiselectItemSelector" 是一个基于ExtJs框架的组件,用于实现多选项选择器功能。在Web应用开发中,这样的组件常用于让用户能够从一组可选项中选取多个项目,例如在用户管理界面中选择多个用户进行操作。...

Global site tag (gtag.js) - Google Analytics