`

ExtJs关于grid高度自适应浏览器的问题解决办法

    博客分类:
  • ext
 
阅读更多
ExtJs中对于grid适应高度问题相信很多人都遇到过,宽度当然好说,高度设置了百分比结果始终不能适应容器高度。

解决思路是,加载完成时,获取document对象的高度,减去grid上面其他panel的高度(如果页面只有一个grid的话可以省去这一步),然后结果付给grid的高度。

当浏览器高度变化的时候,调用window对象的onresize方法,再次按照上述步骤,重新调整grid的高度。实现自适应高度
//设置grid高度
	grid.setHeight(document.body.clientHeight-Ext.get('topPanel').getHeight());
	//窗口重绘时改变grid高度
	window.onresize=function(){  
		grid.setHeight(document.body.clientHeight-Ext.get('topPanel').getHeight());
	};
分享到:
评论

相关推荐

    解决extjs grid 不随窗口大小自适应的改变问题

    在使用ExtJS框架开发时,开发者常常会遇到一个问题,即在浏览器窗口大小改变后,ExtJS Grid组件无法自动调整...通过上述方法,可以有效解决ExtJS Grid组件在窗口大小变化时无法自适应的问题,提升Web应用的用户体验。

    Extjs自动最大化panel

    它提供了丰富的组件系统,包括Panel、Grid、Form等,而Panel是EXTJS中的核心组件之一,可以视为一个可自定义的容器,可以包含其他组件。 在传统的EXTJS中,`viewport`是一个特殊的布局,用于将整个页面作为其渲染...

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

    本文将详细介绍如何解决这个在Extjs GridPanel中出现横向滚动条的问题。 首先,我们需要理解Extjs GridPanel的基本结构。GridPanel是一个可配置的组件,用于展示表格数据。它由多列(columns)组成,每列有自己的...

    ExtJS2.0实用简明教程(chm)文档

    同时,对于ExtJS 2.0版本的局限性,比如对现代浏览器支持的不足,也需要有所了解,以便在项目中做出适当选择。 总之,这个压缩包为学习和使用ExtJS 2.0提供了必要的资源,通过深入学习和实践,开发者可以熟练掌握这...

    精通JS脚本之ExtJS框架.part2.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    使用Sencha ExtJS和Sencha Cmd开发RIA程序.pdf

    为了适应不同设备的屏幕尺寸,ExtJS支持创建自适应的应用程序,包括使组件自适应、普通类自适应以及响应式布局。 Sencha ExtJS中还包含了一些常用的组件,如Ext.grid.Panel(网格面板)用于创建交互式的表格数据...

    ExtJS-3.4.0系列目录

    **ExtJS-3.4.0系列目录** 在ExtJS框架中,3.4.0版本提供了丰富的组件和功能,适合构建复杂的Web应用程序。以下是对标题和描述中提及的几个关键知识点的详细解释: 1. **Ext JS 下载及配置** 在开始使用Ext JS前,...

    精通JS脚本之ExtJS框架.part1.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    基于EXTJS简明教程2.0的笔记

    9. **ViewPort** 用于渲染整个body,能根据浏览器窗口大小自适应调整。使用`border`布局时,组件的位置由`region`属性决定。 10. **Border布局实例** `border`布局允许将组件分配到north, south, west, east四个...

    《Ext+JS》 样章

    EXTJS提供了详尽的API文档和丰富的示例,还有活跃的社区论坛,为开发者提供了学习和解决问题的资源。 综上所述,EXTJS是一个全面的JavaScript框架,适用于开发复杂、高性能的Web应用。通过深入学习和实践,开发者...

    ext-2.2.1.rar

    这个“ext-2.2.1.rar”压缩包包含EXTJS库的2.2.1版本,它是EXTJS发展过程中的一个重要里程碑,为开发者提供了丰富的组件和功能,使得在浏览器端创建复杂的用户界面变得更为便捷。 EXTJS的核心是其组件模型,它提供...

    extjs控件列表

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

    Ext Js权威指南(.zip.001

    9.4.13 自适应布局:ext.layout.container.abstractfit与ext.layout.container.fit / 456 9.4.14 卡片布局:ext.layout.container.abstractcard与ext.layout.container.card / 456 9.5 标签面板 / 458 9.5.1 ...

    ExtAspNet_v2.3.2_dll

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

    Ext企业开发典雅蓝色开发界面

    - 使用Chrome DevTools或Firebug等浏览器内置的调试工具,可以便捷地定位和修复前端代码问题。 总的来说,"Ext企业开发典雅蓝色开发界面"是基于Ext JS框架,融合了典雅的蓝色设计和企业级功能,适用于ASP.NET环境...

Global site tag (gtag.js) - Google Analytics