`
jiaohougenyang
  • 浏览: 6595 次
文章分类
社区版块
存档分类
最新评论

Extjs4 设置panel内部的gridpanel的滚动条

 
阅读更多

当grid 的实际宽度大于其父容器panel的时候,超出的1部分表格被默认隐藏,滚动条不见了。

这时候我们一般要做两件事 1.把滚动条找回来,2.将滚动条放到panel上,

这样子才能最大程度上满足用户使用感受,


解决方案如下:

其实很简单,只要配置下grid 两个属性:

1. width: 2620, (grid的真实宽度,值一般都比较大) ;

2.bodyStyle: 'overflow-x:hidden; overflow-y:hidden',(隐藏grid滚动条)。

3.一般这样之后就ok了,有时候可能父容器panel的属性还要设置下 autoScroll:true,但是Extjs默认就是如此,一般是在受到其他组件影响的情况后才需要去设置。


某效果图如下:





分享到:
评论

相关推荐

    Ext grid panel 滚动条位置不变

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

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

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

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

    在EXTJS开发中,我们经常会遇到`Grid Panel`滚动条失效的问题。这通常是由于对`Grid Panel`中的`store`数据进行了过滤操作,导致滚动条无法正常工作。要理解这个问题,首先我们需要知道EXTJS `Grid Panel`的工作原理...

    Extjs学习带注释

    - **Grid 视图**:掌握 Grid 视图的配置和使用方法,包括滚动条和拖拽等交互特性。 #### 二十一、GridPanel 分页 - **JSON-LIB**:介绍 JSON-LIB 的作用,它常用于处理 JSON 数据。 - **分页工具栏**:了解如何在 ...

    extjs 3.2.1 项目

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

    ExtJSCommonWidgets:常见的 ExtJS 5 小部件

    它们可以被嵌套以创建复杂的布局结构,支持标题、工具栏、边框和滚动条等特性。 4. **表单(Form)**:ExtJS 提供了强大的表单组件,如文本字段、复选框、单选按钮、下拉框等,用于收集用户输入。表单支持验证、...

    extjs控件列表

    ### ExtJS控件详解 #### 基本组件 **Ext.Button** - **描述**: 提供了一种标准的用户交互方式,通常用于触发特定事件或功能。 - **用途**: 创建按钮,可以设置图标、文本、工具提示等。 **Ext.SplitButton** - **...

    EXT2.0分页

    在实际项目中,开发者还需要关注分页效率和用户体验,例如通过缓存策略减少不必要的请求,或者使用懒加载技术,只在用户滚动到可视区域时加载更多数据。此外,优化分页组件的样式和交互,使其符合用户习惯也是提高...

    31总结1

    5. **Panel** - 布局容器,可以包含其他组件,提供标题、工具栏、滚动条等特性。 ExtJS也是一套强大的前端框架,其组件包括: 1. **Window** - 弹出窗口,类似Dialog,但功能更加强大,支持拖拽、最大化等操作。 2...

Global site tag (gtag.js) - Google Analytics