给dataview添加自定义滚动条事件
DataViewUi== Ext.extend(Ext.DataView,{
id:'dataview',
title:'dataview',
store:dataviewStore,
tpl:tpl,
initComponent:function(){
DataViewUi.superclass.initComponent.call(this);
this.addEvents(
'bodyscroll'
);
this.on('afterrender',this.onAfterRender,this);
},
onAfterRender:function(view){
var el = view.getEl().up('div');
el.on('scroll',this.scrollHandle,this);
},
scrollHandle:function(e,t,o){
this.fireEvent('bodyscroll',e,t,o);
}
});
DataView = Ext.extend(DataViewUi,{
initComponent:function(){
DataView.superclass.initComponent.call(this);
this.on('bodyscroll',this.handleScroll,this);
},
handleScroll:function(e,t,o){
//alert('s');
//此处对dataview的滚动条事件进行处理
}
});
分享到:
相关推荐
在ExtJS 4.0版本中,它提供了一系列功能,包括表格面板(Grid Panel)的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中,表格面板允许用户动态隐藏或显示列,以...
它支持标题、工具栏、滚动条等特性。 2. **Grid(网格)**: Grid组件用于展示表格数据,支持排序、分页、选择行等功能,是数据展示的重要组件。 3. **Form(表单)**: ExtJS提供了多种表单组件,如文本框、下拉框...
具体做法是监听`beforerefresh`和`refresh`事件,在这些事件中记录并恢复滚动条的位置。 ##### 监听beforerefresh事件 ```javascript listeners: { beforerefresh: function (view) { view.scrollTop = view....
在使用ExtJS开发Web应用程序时,经常会遇到在GridPanel中数据列过多,导致横向滚动条自动出现的问题。这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽,因此浏览器会自动显示横向滚动条以便用户查看全部数据...
ExtJS 提供了一个完整的框架,包括丰富的UI组件、数据绑定机制、布局管理以及强大的事件模型。这使得开发者能够创建功能丰富的Web应用,具有桌面级的用户体验。事件处理是ExtJS中非常关键的一部分,它允许用户与UI...
这个组件可能包含输入框(供用户输入消息)、发送按钮、以及一个滚动条支持的列表或网格(显示聊天记录)。使用ExtJS的FormPanel和TextArea组件可以轻松创建这些元素,并通过监听事件来处理用户的输入和发送行为。 ...
总的来说,EXTJS Grid Panel滚动条失效的问题可以通过调整组件配置和列宽管理来解决。理解Grid Panel的布局和滚动逻辑是找到问题根源的关键。在实际开发中,遇到此类问题时,可以尝试上述解决方案,并根据具体情况...
这款图片浏览器利用了ExtJS4的组件化、数据绑定和事件处理等特性,为用户提供了一个交互性强、功能丰富的图片浏览体验。 在实现这个图片浏览器的过程中,开发者可能使用了以下核心ExtJS4组件和技术: 1. **Panel...
4. 嵌入式滚动条:这里的“嵌入式滚动条”可能指的是在Grid列内部实现的滚动条,而不是整个Grid的滚动条。这需要我们自定义列渲染器,使得进度条可以随数据的滚动而显示和隐藏。 实现这个功能的步骤大致如下: 1. ...
2. 图像资源:如按钮、图标、滚动条等组件的图片,用于实现更精细的图形效果。 3. SASS或LESS源码:高级皮肤可能提供SASS或LESS源码,这是一种预处理器语言,可以方便地进行颜色和样式调整。 使用这些皮肤资源时,...
接着,创建一个ExtJS的容器组件,比如面板(Panel),并在其配置中指定使用Highstock的图表类型。 在配置Highstock时,你需要定义系列(series)、x轴(xAxis)和y轴(yAxis)的详细信息。系列通常对应于你要展示的...
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...
1. **CSS 文件**:在 `css` 文件夹中,通常包含了一系列的CSS样式表文件,这些文件定义了ExtJS组件在黑主题下的样式。例如,`ext-theme-neptune-all.css` 可能是基础主题文件,而 `ext-theme-black.css` 则是覆盖并...
- **Panel**:基本的容器组件,可以容纳其他组件,具有标题、工具栏、滚动条等功能。 3. **项目开发**: - **MVC架构**:ExtJS 3.2.1引入了Model-View-Controller模式,有助于代码组织和分离关注点。 - **数据...
锁定列功能通过引入LockingGridPanel实现,这是一个增强版的GridPanel,它允许我们将表格分为两个或更多的部分,每个部分有自己的垂直滚动条。锁定的部分始终保持在屏幕左侧,而可滚动的部分则包含未锁定的列。这样...
`Multiselect.css` 文件是该组件的样式表,它定义了MultiselectItemSelector在页面上的视觉呈现,包括选中项的样式、滚动条的外观、布局以及其他UI元素。理解并自定义这些CSS规则对于调整组件以符合项目整体风格至关...
如果设置为`true`,则当内容超出面板尺寸时,面板的body元素将自动显示滚动条;如果为`false`,则内容将被截断。 - **autoShow (Boolean)**:设置是否移除组件的隐藏样式,如`'x-hidden'`或`'x-hide-display'`。...
例如,你可以通过`activeTab`配置项设置默认激活的Tab,或者通过`enableTabScroller`开启滚动条,当Tab数量过多时自动显示。 标签页的事件监听也是其强大功能的一部分,你可以监听如`tabchange`这样的事件,当用户...